Skip to content

Commit 3abec56

Browse files
victorpatruvictorpatru
committed
chore: convert statsboxgrid to chakra
1 parent 0e0157f commit 3abec56

File tree

1 file changed

+102
-118
lines changed

1 file changed

+102
-118
lines changed

‎src/components/StatsBoxGrid.tsx

Lines changed: 102 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
import React, { useState, useEffect } from "react"
2-
import styled from "@emotion/styled"
32
import { useIntl } from "react-intl"
43
import axios from "axios"
54
import { kebabCase } from "lodash"
65
import { AreaChart, ResponsiveContainer, Area, XAxis } from "recharts"
76

8-
import { Grid, Icon, VStack, Box as ChakraBox } from "@chakra-ui/react"
7+
import { VStack, Grid, Box, Icon, Button, Text } from "@chakra-ui/react"
98
import { MdInfoOutline } from "react-icons/md"
109

1110
import Translation from "./Translation"
1211
import Tooltip from "./Tooltip"
1312
import Link from "./Link"
14-
// import Icon from "./Icon"
1513
import StatErrorMessage from "./StatErrorMessage"
1614
import StatLoadingMessage from "./StatLoadingMessage"
1715

@@ -26,106 +24,6 @@ import { GATSBY_FUNCTIONS_PATH } from "../constants"
2624
import { Lang } from "../utils/languages"
2725
import { Direction } from "../types"
2826

29-
const Value = styled.span`
30-
position: absolute;
31-
bottom: 8%;
32-
font-size: min(4.4vw, 4rem);
33-
font-weight: 600;
34-
margin-top: 0rem;
35-
margin-bottom: 1rem;
36-
color: ${({ theme }) => theme.colors.text};
37-
flex-wrap: wrap;
38-
text-overflow: ellipsis;
39-
@media (max-width: ${({ theme }) => theme.breakpoints.l}) {
40-
font-size: max(8.8vw, 48px);
41-
}
42-
`
43-
44-
const Title = styled.p`
45-
font-size: 1.25rem;
46-
margin-bottom: 0.5rem;
47-
color: ${({ theme }) => theme.colors.text};
48-
text-transform: uppercase;
49-
font-family: ${(props) => props.theme.fonts.monospace};
50-
`
51-
52-
const Box = styled.div`
53-
position: relative;
54-
color: ${({ theme }) => theme.colors.text};
55-
height: 20rem;
56-
background: ${({ theme, color = "" }) => theme.colors[color]};
57-
display: flex;
58-
flex-direction: column;
59-
justify-content: space-between;
60-
align-items: flex-start;
61-
border: 1px solid ${({ theme }) => theme.colors.color};
62-
padding: 1.5rem;
63-
@media (max-width: ${({ theme }) => theme.breakpoints.l}) {
64-
border-left: 0px solid #000000;
65-
border-right: 0px solid #000000;
66-
margin-top: -1px;
67-
padding: 1rem;
68-
padding-top: 2rem;
69-
}
70-
`
71-
72-
const StatRow = styled.div`
73-
display: flex;
74-
flex-direction: column;
75-
`
76-
77-
// const StyledIcon = styled(Icon)`
78-
// fill: ${({ theme }) => theme.colors.text};
79-
// margin-right: 0.5rem;
80-
// @media (max-width: ${({ theme }) => theme.breakpoints.l}) {
81-
// }
82-
// &:hover,
83-
// &:active,
84-
// &:focus {
85-
// fill: ${({ theme }) => theme.colors.primary};
86-
// }
87-
// `
88-
89-
const Lines = styled.div`
90-
position: absolute;
91-
left: 0;
92-
bottom: 0;
93-
width: 100%;
94-
height: 65%;
95-
`
96-
97-
const ButtonContainer = styled.div<{ dir?: Direction }>`
98-
position: absolute;
99-
${({ dir }) => (dir === "rtl" ? "left" : "right")}: 20px;
100-
bottom: 20px;
101-
font-family: ${(props) => props.theme.fonts.monospace};
102-
`
103-
104-
const Button = styled.button<{ color: string }>`
105-
background: ${(props) => props.theme.colors.background};
106-
font-family: ${(props) => props.theme.fonts.monospace};
107-
font-size: 1.25rem;
108-
color: ${({ theme }) => theme.colors.text};
109-
padding: 2px 15px;
110-
border-radius: 1px;
111-
border: 1px solid ${({ theme, color }) => theme.colors[color]};
112-
cursor: pointer;
113-
114-
&:disabled {
115-
cursor: default;
116-
opacity: 0.7;
117-
}
118-
`
119-
120-
const ButtonToggle = styled(Button)<{ active: boolean }>`
121-
${({ active, theme }) =>
122-
active &&
123-
`
124-
background-color: ${theme.colors.homeBoxPurple};
125-
opacity: 1;
126-
`}
127-
`
128-
12927
const ranges = ["30d", "90d"] as const
13028

13129
interface State {
@@ -158,20 +56,21 @@ const GridItem: React.FC<IGridItemProps> = ({ metric, dir }) => {
15856
<StatLoadingMessage />
15957
) : (
16058
<VStack>
161-
<ChakraBox>
59+
<Box>
16260
{state.value}{" "}
16361
<Tooltip content={tooltipContent(metric)}>
16462
<Icon
16563
as={MdInfoOutline}
16664
width="24px"
16765
height="24px"
66+
fill="text"
67+
mr="0.5rem"
16868
_hover={{ fill: "primary" }}
16969
_active={{ fill: "primary" }}
17070
_focus={{ fill: "primary" }}
171-
mr="0.5rem"
17271
></Icon>
17372
</Tooltip>
174-
</ChakraBox>
73+
</Box>
17574
</VStack>
17675
)
17776

@@ -228,18 +127,90 @@ const GridItem: React.FC<IGridItemProps> = ({ metric, dir }) => {
228127
)
229128

230129
return (
231-
<Box>
130+
<Box
131+
position="relative"
132+
color="text"
133+
height="20rem"
134+
background={""}
135+
display="flex"
136+
flexDirection="column"
137+
justifyContent="space-between"
138+
alignItems="flex-start"
139+
borderX={{
140+
base: "0px solid #000000",
141+
lg: "1px solid",
142+
}}
143+
borderY="1px solid"
144+
marginTop={{
145+
base: "-1px",
146+
lg: "0",
147+
}}
148+
padding={{
149+
base: "1rem",
150+
lg: "1.5rem",
151+
}}
152+
paddingTop={{
153+
base: "2rem",
154+
lg: "0",
155+
}}
156+
>
232157
<div>
233-
<Title>{title}</Title>
158+
<Text
159+
fontSize="1.25rem"
160+
mb="0.5rem"
161+
color="text"
162+
textTransform="uppercase"
163+
fontFamily="monospace"
164+
>
165+
{title}
166+
</Text>
234167
<p>{description}</p>
235168
</div>
236169
{!state.hasError && !isLoading && (
237170
<>
238-
<Lines>{chart}</Lines>
239-
<ButtonContainer dir={dir}>{buttonContainer}</ButtonContainer>
171+
<Box
172+
position="absolute"
173+
left={0}
174+
bottom={0}
175+
width="100%"
176+
height="65%"
177+
>
178+
{chart}
179+
</Box>
180+
{dir === "rtl" ? (
181+
<Box
182+
position="absolute"
183+
bottom="20px"
184+
fontFamily="monospace"
185+
left="20px"
186+
>
187+
{buttonContainer}
188+
</Box>
189+
) : (
190+
<Box
191+
position="absolute"
192+
bottom="20px"
193+
fontFamily="monospace"
194+
right="20px"
195+
>
196+
{buttonContainer}
197+
</Box>
198+
)}
240199
</>
241200
)}
242-
<Value>{value}</Value>
201+
<Text
202+
position="absolute"
203+
bottom="8%"
204+
fontSize={{ base: "max(8.8vw, 48px)", lg: "min(4.4vw, 4rem)" }}
205+
fontWeight={600}
206+
marginTop="0rem"
207+
marginBottom="1rem"
208+
color="text"
209+
flexWrap="wrap"
210+
textOverflow="ellipsis"
211+
>
212+
{value}
213+
</Text>
243214
</Box>
244215
)
245216
}
@@ -259,16 +230,29 @@ interface IRangeSelectorProps {
259230
const RangeSelector: React.FC<IRangeSelectorProps> = ({ state, setState }) => (
260231
<div>
261232
{ranges.map((range, idx) => (
262-
<ButtonToggle
263-
active={state === range}
264-
onClick={() => {
265-
setState(ranges[idx])
266-
}}
233+
<Button
234+
onClick={() => setState(ranges[idx])}
267235
key={idx}
268236
color={""}
237+
background="background"
238+
fontFamily="monospace"
239+
fontSize="1.25rem"
240+
padding="2px 15px"
241+
borderRadius="1px"
242+
border="1px solid"
243+
cursor="pointer"
244+
_focus={{ outline: "none" }}
245+
_hover={{ color: "" }}
246+
_active={{ color: "" }}
247+
_disabled={{
248+
cursor: "default",
249+
opacity: "0.7",
250+
}}
251+
size="sm"
252+
backgroundColor={state === ranges[idx] ? "homeBoxPurple" : ""}
269253
>
270254
{range}
271-
</ButtonToggle>
255+
</Button>
272256
))}
273257
</div>
274258
)
@@ -566,7 +550,7 @@ const StatsBoxGrid: React.FC<IProps> = () => {
566550
gridTemplateColumns="repeat(2, 1fr)"
567551
margin={{
568552
base: "0",
569-
md: "2rem 0 0",
553+
sm: "2rem 0 0",
570554
lg: "2rem 2rem 0",
571555
}}
572556
borderRadius="2px"

0 commit comments

Comments
 (0)