-
Notifications
You must be signed in to change notification settings - Fork 17
/
App.tsx
70 lines (64 loc) · 1.7 KB
/
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import React from "react";
import ReactDOM from "react-dom";
import {
extendTheme,
ChakraProvider,
SimpleGrid,
Text,
Image,
} from "@chakra-ui/react";
import "./index.css";
import Search from "growlers/Search";
import Cart from "growlers/Cart";
import Taps from "growlers/Taps";
import DataComponent from "growlers/DataComponent";
import { load } from "growlers/store";
// load("growlers-tap-station");
load("hv-taplist");
const config = {
useSystemColorMode: false,
initialColorMode: "dark",
};
const customTheme = extendTheme({ config });
const App = () => (
<ChakraProvider theme={customTheme}>
<div
style={{
maxWidth: "960px",
margin: "auto",
display: "grid",
gridTemplateColumns: "1fr 3fr",
gridColumnGap: "1rem",
}}
>
<div>
<Search />
<Cart />
<DataComponent>
{({ filteredTaps }) =>
filteredTaps.slice(0, 5).map((beverage) => (
<SimpleGrid columns={2} templateColumns="1fr 7fr" gap={1} mt={3}>
<div>
<Image
src={beverage.logo}
alt={`${beverage.producerName} logo`}
/>
</div>
<div>
<Text fontSize="xs" isTruncated>
<strong>{beverage.producerName}</strong>
</Text>
<Text fontSize="xs" isTruncated>
{beverage.beverageName}
</Text>
</div>
</SimpleGrid>
))
}
</DataComponent>
</div>
<Taps />
</div>
</ChakraProvider>
);
ReactDOM.render(<App />, document.getElementById("app"));