|
1 | 1 | import React from "react"
|
2 |
| -import styled from "@emotion/styled" |
| 2 | +import { Flex, FlexProps, Text } from "@chakra-ui/react" |
3 | 3 |
|
4 | 4 | import Link from "./Link"
|
5 |
| -import Emoji from "./OldEmoji" |
| 5 | +import Emoji from "./Emoji" |
6 | 6 | import Translation from "./Translation"
|
7 | 7 |
|
8 | 8 | import docLinks from "../data/developer-docs-links.yaml"
|
9 | 9 | import { DeveloperDocsLink } from "../types"
|
10 | 10 | import { TranslationKey } from "../utils/translations"
|
11 | 11 |
|
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 |
| - |
21 | 12 | // 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 | +) |
82 | 43 |
|
83 | 44 | export interface DocsArrayProps {
|
84 | 45 | to: string
|
@@ -125,42 +86,46 @@ const DocsNav: React.FC<IProps> = ({ relativePath }) => {
|
125 | 86 | currentIndex + 1 < docsArray.length ? docsArray[currentIndex + 1] : null
|
126 | 87 |
|
127 | 88 | return (
|
128 |
| - <Container> |
| 89 | + <Flex |
| 90 | + direction={{ base: "column-reverse", m: "row" }} |
| 91 | + justify="space-between" |
| 92 | + alignItems={{ base: "center", m: "flex-start" }} |
| 93 | + > |
129 | 94 | {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"> |
136 | 101 | <Translation id="previous" />
|
137 |
| - </UppercaseSpan> |
138 |
| - <PreviousNavLink to={previousDoc.to}> |
| 102 | + </Text> |
| 103 | + <Link to={previousDoc.to} textAlign="start"> |
139 | 104 | <Translation id={previousDoc.id} />
|
140 |
| - </PreviousNavLink> |
141 |
| - </PreviousTextDiv> |
142 |
| - </PreviousCard> |
| 105 | + </Link> |
| 106 | + </TextDiv> |
| 107 | + </Card> |
143 | 108 | ) : (
|
144 |
| - <div /> |
| 109 | + <Flex /> |
145 | 110 | )}
|
146 | 111 | {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"> |
150 | 115 | <Translation id="next" />
|
151 |
| - </UppercaseSpan> |
152 |
| - <NextNavLink to={nextDoc.to}> |
| 116 | + </Text> |
| 117 | + <Link to={nextDoc.to} textAlign="end"> |
153 | 118 | <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> |
160 | 125 | ) : (
|
161 |
| - <div /> |
| 126 | + <Flex /> |
162 | 127 | )}
|
163 |
| - </Container> |
| 128 | + </Flex> |
164 | 129 | )
|
165 | 130 | }
|
166 | 131 |
|
|
0 commit comments