Skip to content

Commit 93f6d7d

Browse files
pettinarippettinarip
authored
Merge pull request #8506 from TylerAPfledderer/feat/footer-to-chakra
refactor(footer): migrate component to Chakra
2 parents fb547cf + 353a6ce commit 93f6d7d

File tree

1 file changed

+76
-120
lines changed

1 file changed

+76
-120
lines changed

‎src/components/Footer.tsx

Lines changed: 76 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,22 @@
1+
import {
2+
Box,
3+
Flex,
4+
Heading,
5+
Icon,
6+
List,
7+
ListItem,
8+
SimpleGrid,
9+
useToken,
10+
} from "@chakra-ui/react"
11+
import { graphql, StaticQuery } from "gatsby"
112
import React from "react"
2-
import styled from "@emotion/styled"
13+
import { FaGithub, FaTwitter, FaYoutube, FaDiscord } from "react-icons/fa"
314
import { useIntl } from "react-intl"
4-
import { StaticQuery, graphql } from "gatsby"
5-
import { Icon } from "@chakra-ui/react"
6-
import { FaDiscord, FaGithub, FaTwitter, FaYoutube } from "react-icons/fa"
7-
15+
import { Lang } from "../utils/languages"
816
import { getLocaleTimestamp } from "../utils/time"
9-
import Translation from "./Translation"
10-
import Link from "./Link"
1117
import { isLangRightToLeft, TranslationKey } from "../utils/translations"
12-
import { Lang } from "../utils/languages"
13-
14-
const StyledFooter = styled.footer`
15-
padding-top: 3rem;
16-
padding-bottom: 4rem;
17-
padding: 1rem 2rem;
18-
`
19-
20-
const FooterTop = styled.div`
21-
font-size: ${(props) => props.theme.fontSizes.s};
22-
display: flex;
23-
justify-content: space-between;
24-
align-items: center;
25-
flex-wrap: wrap;
26-
`
27-
28-
const LastUpdated = styled.div`
29-
color: ${(props) => props.theme.colors.text200};
30-
`
31-
32-
const LinkGrid = styled.div`
33-
display: grid;
34-
grid-template-columns: repeat(6, auto);
35-
grid-gap: 1rem;
36-
justify-content: space-between;
37-
@media (max-width: 1300px) {
38-
grid-template-columns: repeat(3, auto);
39-
}
40-
@media (max-width: ${(props) => props.theme.breakpoints.m}) {
41-
grid-template-columns: repeat(2, auto);
42-
}
43-
@media (max-width: 500px) {
44-
grid-template-columns: auto;
45-
}
46-
`
47-
48-
const LinkSection = styled.div``
49-
50-
const SectionHeader = styled.h3`
51-
font-size: 0.875rem;
52-
line-height: 1.6;
53-
margin: 1.14em 0;
54-
font-weight: bold;
55-
`
56-
57-
const List = styled.ul`
58-
font-size: 0.875rem;
59-
line-height: 1.6;
60-
font-weight: 400;
61-
margin: 0;
62-
list-style-type: none;
63-
list-style-image: none;
64-
`
65-
66-
const ListItem = styled.li`
67-
margin-bottom: 1rem;
68-
`
69-
70-
const FooterLink = styled(Link)`
71-
text-decoration: none;
72-
color: ${(props) => props.theme.colors.text200};
73-
svg {
74-
fill: ${(props) => props.theme.colors.text200};
75-
}
76-
&:after {
77-
color: ${(props) => props.theme.colors.text200};
78-
}
79-
&:hover {
80-
text-decoration: none;
81-
color: ${(props) => props.theme.colors.primary};
82-
&:after {
83-
color: ${(props) => props.theme.colors.primary};
84-
}
85-
svg {
86-
fill: ${(props) => props.theme.colors.primary};
87-
}
88-
}
89-
`
90-
91-
const SocialIcons = styled.div`
92-
margin: 1rem 0;
93-
`
94-
const SocialIcon = styled(Icon)`
95-
margin-left: 1rem;
96-
width: 2rem;
97-
98-
@media (max-width: ${(props) => props.theme.breakpoints.s}) {
99-
margin-left: 0;
100-
margin-right: 0.5rem;
101-
}
102-
`
18+
import Link from "./Link"
19+
import Translation from "./Translation"
10320

10421
const socialLinks = [
10522
{
@@ -140,6 +57,8 @@ const Footer: React.FC<IProps> = () => {
14057

14158
const isPageRightToLeft = isLangRightToLeft(intl.locale as Lang)
14259

60+
const [medBp] = useToken("breakpoints", ["md"])
61+
14362
const linkSections: Array<LinkSection> = [
14463
{
14564
title: "use-ethereum",
@@ -372,54 +291,91 @@ const Footer: React.FC<IProps> = () => {
372291
}
373292
`}
374293
render={(data) => (
375-
<StyledFooter>
376-
<FooterTop>
377-
<LastUpdated>
294+
<Box as="footer" p="1rem 2rem">
295+
<Flex
296+
fontSize="sm"
297+
justify="space-between"
298+
alignItems="center"
299+
flexWrap="wrap"
300+
>
301+
<Box color="text200">
378302
<Translation id="website-last-updated" />:{" "}
379303
{getLocaleTimestamp(
380304
intl.locale as Lang,
381305
data.allSiteBuildMetadata.edges[0].node.buildTime
382306
)}
383-
</LastUpdated>
384-
<SocialIcons>
385-
{socialLinks.map((link, idx) => {
307+
</Box>
308+
<Box my={4}>
309+
{socialLinks.map((link, idk) => {
386310
return (
387311
<Link
388-
key={idx}
312+
key={idk}
389313
to={link.to}
390-
hideArrow={true}
314+
hideArrow
391315
color="secondary"
392316
aria-label={link.ariaLabel}
393317
>
394318
<Icon as={link.icon} fontSize="4xl" ml={4} />
395319
</Link>
396320
)
397321
})}
398-
</SocialIcons>
399-
</FooterTop>
400-
<LinkGrid>
322+
</Box>
323+
</Flex>
324+
<SimpleGrid
325+
gap={4}
326+
justifyContent="space-between"
327+
gridTemplateColumns="repeat(6, auto)"
328+
sx={{
329+
"@media (max-width: 1300px)": {
330+
gridTemplateColumns: "repeat(3, auto)",
331+
},
332+
[`@media (max-width: ${medBp})`]: {
333+
gridTemplateColumns: "repeat(2, auto)",
334+
},
335+
"@media (max-width: 500px)": {
336+
gridTemplateColumns: "auto",
337+
},
338+
}}
339+
>
401340
{linkSections.map((section: LinkSection, idx) => (
402-
<LinkSection key={idx}>
403-
<SectionHeader>
341+
<Box key={idx}>
342+
<Heading as="h3" fontSize="sm" lineHeight="1.6" my="1.14em">
404343
<Translation id={section.title} />
405-
</SectionHeader>
406-
<List>
344+
</Heading>
345+
<List fontSize="sm" lineHeight="1.6" fontWeight="400" m={0}>
407346
{section.links.map((link, linkIdx) => (
408-
<ListItem key={linkIdx}>
409-
<FooterLink
410-
dir={isPageRightToLeft ? "auto" : "ltr"}
347+
<ListItem key={linkIdx} mb={4}>
348+
<Link
411349
to={link.to}
412350
isPartiallyActive={false}
351+
dir={isPageRightToLeft ? "auto" : "ltr"}
352+
textDecor="none"
353+
color="text200"
354+
_hover={{
355+
textDecor: "none",
356+
color: "primary",
357+
_after: {
358+
color: "primary",
359+
},
360+
"& svg": {
361+
fill: "primary",
362+
},
363+
}}
364+
sx={{
365+
"& svg": {
366+
fill: "text200",
367+
},
368+
}}
413369
>
414370
<Translation id={link.text} />
415-
</FooterLink>
371+
</Link>
416372
</ListItem>
417373
))}
418374
</List>
419-
</LinkSection>
375+
</Box>
420376
))}
421-
</LinkGrid>
422-
</StyledFooter>
377+
</SimpleGrid>
378+
</Box>
423379
)}
424380
/>
425381
)

0 commit comments

Comments
 (0)