Skip to content

Commit e8216a0

Browse files
authored
Merge pull request #7821 from ethereum/chakra-docs-nav
Migrate DocsNav to Chakra
2 parents 14db30b + 526f318 commit e8216a0

File tree

1 file changed

+62
-97
lines changed

1 file changed

+62
-97
lines changed

src/components/DocsNav.tsx

Lines changed: 62 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,45 @@
11
import React from "react"
2-
import styled from "@emotion/styled"
2+
import { Flex, FlexProps, Text } from "@chakra-ui/react"
33

44
import Link from "./Link"
5-
import Emoji from "./OldEmoji"
5+
import Emoji from "./Emoji"
66
import Translation from "./Translation"
77

88
import docLinks from "../data/developer-docs-links.yaml"
99
import { DeveloperDocsLink } from "../types"
1010
import { TranslationKey } from "../utils/translations"
1111

12-
const Container = styled.div`
13-
display: flex;
14-
justify-content: space-between;
15-
@media (max-width: 604px) {
16-
flex-direction: column-reverse;
17-
align-items: center;
18-
}
19-
`
20-
2112
// TODO make entire card a link
22-
const Card = styled.div`
23-
display: flex;
24-
flex-direction: row;
25-
align-items: center;
26-
margin-top: 1rem;
27-
width: 262px;
28-
height: 82px;
29-
background-color: ${(props) => props.theme.colors.background};
30-
border: 1px solid ${(props) => props.theme.colors.border};
31-
border-radius: 4px;
32-
@media (max-width: 604px) {
33-
width: 100%;
34-
}
35-
`
36-
37-
const PreviousCard = styled(Card)`
38-
justify-content: flex-start;
39-
`
40-
41-
const NextCard = styled(Card)`
42-
justify-content: flex-end;
43-
`
44-
const TextDiv = styled.div`
45-
display: flex;
46-
flex-direction: column;
47-
justify-content: space-between;
48-
max-width: 166px;
49-
height: 100%;
50-
word-wrap: break-word;
51-
padding: 1rem;
52-
line-height: 1rem;
53-
`
54-
55-
const PreviousTextDiv = styled(TextDiv)`
56-
align-items: flex-start;
57-
padding-left: 0rem;
58-
`
59-
60-
const NextTextDiv = styled(TextDiv)`
61-
align-items: flex-end;
62-
padding-right: 0rem;
63-
`
64-
65-
const PreviousNavLink = styled(Link)`
66-
text-align: left;
67-
`
68-
69-
const NextNavLink = styled(Link)`
70-
text-align: right;
71-
`
72-
73-
const EmojiLink = styled(Link)`
74-
text-decoration: none;
75-
padding: 1rem;
76-
height: 100%;
77-
`
78-
79-
const UppercaseSpan = styled.span`
80-
text-transform: uppercase;
81-
`
13+
const Card: React.FC<FlexProps> = ({ children, ...props }) => (
14+
<Flex
15+
alignItems="center"
16+
mt={4}
17+
w="262px"
18+
h="82px"
19+
bg="background"
20+
border="1px"
21+
borderColor="border"
22+
borderRadius={1}
23+
{...props}
24+
>
25+
{children}
26+
</Flex>
27+
)
28+
29+
const TextDiv: React.FC<FlexProps> = ({ children, ...props }) => (
30+
<Flex
31+
direction="column"
32+
justify="space-between"
33+
maxW="166px"
34+
h="100%"
35+
wordWrap="break-word"
36+
p={4}
37+
lineHeight={4}
38+
{...props}
39+
>
40+
{children}
41+
</Flex>
42+
)
8243

8344
export interface DocsArrayProps {
8445
to: string
@@ -125,42 +86,46 @@ const DocsNav: React.FC<IProps> = ({ relativePath }) => {
12586
currentIndex + 1 < docsArray.length ? docsArray[currentIndex + 1] : null
12687

12788
return (
128-
<Container>
89+
<Flex
90+
direction={{ base: "column-reverse", m: "row" }}
91+
justify="space-between"
92+
alignItems={{ base: "center", m: "flex-start" }}
93+
>
12994
{previousDoc ? (
130-
<PreviousCard>
131-
<EmojiLink to={previousDoc.to}>
132-
<Emoji text=":point_left:" size={3} />
133-
</EmojiLink>
134-
<PreviousTextDiv>
135-
<UppercaseSpan>
95+
<Card justify="flex-start">
96+
<Link to={previousDoc.to} textDecoration="none" p={4} h="100%">
97+
<Emoji text=":point_left:" fontSize="5xl" />
98+
</Link>
99+
<TextDiv ps="0">
100+
<Text textTransform="uppercase" m="0">
136101
<Translation id="previous" />
137-
</UppercaseSpan>
138-
<PreviousNavLink to={previousDoc.to}>
102+
</Text>
103+
<Link to={previousDoc.to} textAlign="start">
139104
<Translation id={previousDoc.id} />
140-
</PreviousNavLink>
141-
</PreviousTextDiv>
142-
</PreviousCard>
105+
</Link>
106+
</TextDiv>
107+
</Card>
143108
) : (
144-
<div />
109+
<Flex />
145110
)}
146111
{nextDoc ? (
147-
<NextCard>
148-
<NextTextDiv>
149-
<UppercaseSpan>
112+
<Card justify="flex-end">
113+
<TextDiv alignItems="flex-end" pe="0">
114+
<Text textTransform="uppercase" m="0">
150115
<Translation id="next" />
151-
</UppercaseSpan>
152-
<NextNavLink to={nextDoc.to}>
116+
</Text>
117+
<Link to={nextDoc.to} textAlign="end">
153118
<Translation id={nextDoc.id} />
154-
</NextNavLink>
155-
</NextTextDiv>
156-
<EmojiLink to={nextDoc.to}>
157-
<Emoji text=":point_right:" size={3} />
158-
</EmojiLink>
159-
</NextCard>
119+
</Link>
120+
</TextDiv>
121+
<Link to={nextDoc.to} textDecoration="none" p={4} h="100%">
122+
<Emoji text=":point_right:" fontSize="5xl" />
123+
</Link>
124+
</Card>
160125
) : (
161-
<div />
126+
<Flex />
162127
)}
163-
</Container>
128+
</Flex>
164129
)
165130
}
166131

0 commit comments

Comments
 (0)