Skip to content

Commit 24ec6e5

Browse files
author
soheil
committed
refactor(state-template): add Chakra Unordered List
1 parent 00a6da5 commit 24ec6e5

File tree

1 file changed

+109
-132
lines changed

1 file changed

+109
-132
lines changed

‎src/templates/static.tsx

Lines changed: 109 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import {
44
Box,
55
Flex,
66
Text,
7-
useTheme,
87
Divider as ChakraDivider,
98
Heading,
109
ListItem as ChakraListItem,
10+
UnorderedList as ChakraUnorderedList,
1111
Icon,
1212
} from "@chakra-ui/react"
1313
import { graphql, PageProps } from "gatsby"
@@ -53,145 +53,122 @@ import { ChildOnlyProp, Context } from "../types"
5353

5454
// Apply styles for classes within markdown here
5555

56-
const Pre = ({ children }: ChildOnlyProp) => {
57-
return (
58-
<Text
59-
as="pre"
60-
maxW="full"
61-
overflowX="scroll"
62-
bgColor="preBackground"
63-
borderRadius="base"
64-
p={4}
65-
border="1px solid"
66-
borderColor="preBorder"
67-
whiteSpace="pre-wrap"
68-
>
69-
{children}
70-
</Text>
71-
)
72-
}
56+
const Pre = (props: ChildOnlyProp) => (
57+
<Text
58+
as="pre"
59+
maxW="full"
60+
overflowX="scroll"
61+
bgColor="preBackground"
62+
borderRadius="base"
63+
p={4}
64+
border="1px solid"
65+
borderColor="preBorder"
66+
whiteSpace="pre-wrap"
67+
{...props}
68+
/>
69+
)
7370

74-
const HR = () => {
75-
return (
76-
<ChakraDivider
77-
mt={8}
78-
mb={4}
79-
display="inline-block"
80-
position="inherit"
81-
bg="border"
82-
/>
83-
)
84-
}
71+
const HR = () => (
72+
<ChakraDivider
73+
mt={8}
74+
mb={4}
75+
display="inline-block"
76+
position="inherit"
77+
bg="border"
78+
/>
79+
)
8580

86-
const Divider = () => {
87-
return <Box my={16} w="10%" h={1} bgColor="homeDivider" />
88-
}
81+
const Divider = () => <Box my={16} w="10%" h={1} bgColor="homeDivider" />
8982

90-
const Header1 = ({ children }: ChildOnlyProp) => {
91-
return (
92-
<Heading
93-
as="h1"
94-
fontSize={{ base: "2.5rem", md: "5xl" }}
95-
lineHeight={1.4}
96-
fontWeight="bold"
97-
_before={{
98-
content: `""`,
99-
display: "block",
100-
h: "140px",
101-
mt: "-140px",
102-
visibility: "hidden",
103-
}}
104-
sx={{
105-
a: {
106-
display: "none",
107-
},
108-
}}
109-
>
110-
{children}
111-
</Heading>
112-
)
113-
}
83+
const Header1 = (props: ChildOnlyProp) => (
84+
<Heading
85+
as="h1"
86+
fontSize={{ base: "2.5rem", md: "5xl" }}
87+
lineHeight={1.4}
88+
fontWeight="bold"
89+
_before={{
90+
content: `""`,
91+
display: "block",
92+
h: "140px",
93+
mt: "-140px",
94+
visibility: "hidden",
95+
}}
96+
sx={{
97+
a: {
98+
display: "none",
99+
},
100+
}}
101+
{...props}
102+
/>
103+
)
114104

115-
const Header2 = ({ children }: ChildOnlyProp) => {
116-
return (
117-
<Heading
118-
fontSize={{ base: "2xl", md: "2rem" }}
119-
lineHeight={1.4}
120-
fontWeight="bold"
121-
sx={{ position: "inherit !important" }}
122-
_before={{
123-
content: `""`,
124-
display: "block",
125-
h: "120px",
126-
mt: "-120px",
127-
visibility: "hidden",
128-
}}
129-
>
130-
{children}
131-
</Heading>
132-
)
133-
}
105+
const Header2 = (props: ChildOnlyProp) => (
106+
<Heading
107+
fontSize={{ base: "2xl", md: "2rem" }}
108+
lineHeight={1.4}
109+
fontWeight="bold"
110+
sx={{ position: "inherit !important" }}
111+
_before={{
112+
content: `""`,
113+
display: "block",
114+
h: "120px",
115+
mt: "-120px",
116+
visibility: "hidden",
117+
}}
118+
{...props}
119+
/>
120+
)
134121

135-
const Header3 = ({ children }: ChildOnlyProp) => {
136-
return (
137-
<Heading
138-
as="h3"
139-
fontSize={{ base: "xl", md: "2xl" }}
140-
lineHeight={1.4}
141-
sx={{ position: "inherit !important" }}
142-
_before={{
143-
content: `""`,
144-
display: "block",
145-
h: "120px",
146-
mt: "-120px",
147-
visibility: "hidden",
148-
}}
149-
>
150-
{children}
151-
</Heading>
152-
)
153-
}
122+
const Header3 = (props: ChildOnlyProp) => (
123+
<Heading
124+
as="h3"
125+
fontSize={{ base: "xl", md: "2xl" }}
126+
lineHeight={1.4}
127+
sx={{ position: "inherit !important" }}
128+
_before={{
129+
content: `""`,
130+
display: "block",
131+
h: "120px",
132+
mt: "-120px",
133+
visibility: "hidden",
134+
}}
135+
{...props}
136+
/>
137+
)
154138

155-
const Header4 = ({ children }: ChildOnlyProp) => {
156-
return (
157-
<Heading
158-
as="h4"
159-
fontSize={{ base: "md", md: "xl" }}
160-
lineHeight={1.4}
161-
fontWeight="semibold"
162-
sx={{ position: "unset !important" }}
163-
_before={{
164-
content: `""`,
165-
display: "block",
166-
h: "120px",
167-
mt: "-120px",
168-
visibility: "hidden",
169-
}}
170-
>
171-
{children}
172-
</Heading>
173-
)
174-
}
139+
const Header4 = (props: ChildOnlyProp) => (
140+
<Heading
141+
as="h4"
142+
fontSize={{ base: "md", md: "xl" }}
143+
lineHeight={1.4}
144+
fontWeight="semibold"
145+
sx={{ position: "unset !important" }}
146+
_before={{
147+
content: `""`,
148+
display: "block",
149+
h: "120px",
150+
mt: "-120px",
151+
visibility: "hidden",
152+
}}
153+
{...props}
154+
/>
155+
)
175156

176-
const Paragraph = ({ children }: ChildOnlyProp) => {
177-
return (
178-
<Text fontSize="md" mt={8} mb={4} color="text300">
179-
{children}
180-
</Text>
181-
)
182-
}
157+
const Paragraph = (props: ChildOnlyProp) => (
158+
<Text fontSize="md" mt={8} mb={4} color="text300" {...props} />
159+
)
183160

184-
const ListItem = ({ children }: ChildOnlyProp) => {
185-
return <ChakraListItem color="text300">{children}</ChakraListItem>
186-
}
161+
const ListItem = (props: ChildOnlyProp) => (
162+
<ChakraListItem color="text300" {...props} />
163+
)
187164

188-
const CardContainer = ({ children }: ChildOnlyProp) => {
189-
return (
190-
<Flex wrap="wrap" mx={-4}>
191-
{children}
192-
</Flex>
193-
)
194-
}
165+
const UnorderedList = (props: ChildOnlyProp) => (
166+
<ChakraUnorderedList ms="1.45rem" {...props} />
167+
)
168+
169+
const CardContainer = (props: ChildOnlyProp) => (
170+
<Flex wrap="wrap" mx={-4} {...props} />
171+
)
195172

196173
// Note: you must pass components to MDXProvider in order to render them in markdown files
197174
// https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#mdxprovider
@@ -202,6 +179,7 @@ const components = {
202179
h3: Header3,
203180
h4: Header4,
204181
p: Paragraph,
182+
ul: UnorderedList,
205183
li: ListItem,
206184
pre: Pre,
207185
hr: HR,
@@ -239,7 +217,6 @@ const StaticPage = ({
239217
data: { siteData, pageData: mdx },
240218
pageContext: { relativePath },
241219
}: PageProps<Queries.StaticPageQuery, Context>) => {
242-
const theme = useTheme()
243220
const intl = useIntl()
244221

245222
if (!siteData || !mdx?.frontmatter || !mdx.parent)

0 commit comments

Comments
 (0)