Skip to content

Commit d1dc5f6

Browse files
forestreamforestream
committed
Refactor
1 parent ea76ca7 commit d1dc5f6

File tree

10 files changed

+98
-185
lines changed

10 files changed

+98
-185
lines changed

‎apps/landing/src/app/(detail)/components/MdxCardFooter.tsx‎

Lines changed: 33 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -12,46 +12,39 @@ export default function MdxCardFooter({
1212
}) {
1313
const [isOpen, setIsOpen] = useState(false)
1414
return (
15-
<>
16-
<VStack justifyContent="flex-end" maxH="600px" maxW="100%">
17-
<Flex
18-
borderTop="1px solid $border"
19-
justifyContent="flex-end"
20-
px="24px"
21-
py="10px"
22-
w="100%"
15+
<VStack justifyContent="flex-end" maxH="600px" maxW="100%">
16+
<Flex
17+
borderTop="1px solid $border"
18+
justifyContent="flex-end"
19+
px="24px"
20+
py="10px"
21+
w="100%"
22+
>
23+
<Center
24+
_active={{
25+
bg: '$menuActive',
26+
}}
27+
_hover={{
28+
bg: '$menuHover',
29+
}}
30+
borderRadius="4px"
31+
color="$captionBold"
32+
cursor="pointer"
33+
gap="8px"
34+
onClick={() => setIsOpen(!isOpen)}
35+
p="8px"
36+
transition="all 0.2s ease-in-out"
37+
w="fit-content"
2338
>
24-
<Center
25-
_active={{
26-
bg: '$menuActive',
27-
}}
28-
_hover={{
29-
bg: '$menuHover',
30-
}}
31-
borderRadius="4px"
32-
color="$captionBold"
33-
cursor="pointer"
34-
gap="8px"
35-
onClick={() => setIsOpen(!isOpen)}
36-
p="8px"
37-
transition="all 0.2s ease-in-out"
38-
w="fit-content"
39-
>
40-
<IconCode isOpen={isOpen} />
41-
<Text>Show Code</Text>
42-
</Center>
43-
</Flex>
44-
{isOpen && (
45-
<Box
46-
borderTop="1px solid $border"
47-
overflow="auto"
48-
px="24px"
49-
py="16px"
50-
>
51-
{children}
52-
</Box>
53-
)}
54-
</VStack>
55-
</>
39+
<IconCode open={isOpen} />
40+
<Text>Show Code</Text>
41+
</Center>
42+
</Flex>
43+
{isOpen && (
44+
<Box borderTop="1px solid $border" overflow="auto" px="24px" py="16px">
45+
{children}
46+
</Box>
47+
)}
48+
</VStack>
5649
)
5750
}

‎apps/landing/src/app/(detail)/components/Table.tsx‎

Lines changed: 0 additions & 62 deletions
This file was deleted.

‎apps/landing/src/app/(detail)/components/button/IconDelete.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1+
import { css } from '@devup-ui/react'
2+
13
export default function IconDelete() {
24
return (
35
<svg
6+
className={css({ transform: 'scale(0.75)' })}
47
fill="currentColor"
58
height="24"
69
stroke="currentColor"
710
strokeWidth="0"
8-
style={{ transform: 'scale(0.75)' }}
911
viewBox="0 0 24 24"
1012
width="24"
1113
xmlns="http://www.w3.org/2000/svg"

‎apps/landing/src/app/(detail)/components/button/demo/Colors.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import { Button } from '@devup-ui/components'
2-
import { Box, css } from '@devup-ui/react'
2+
import { Box, css, Flex } from '@devup-ui/react'
33

44
/**
55
* **Colors**
66
* Pass in an object containing color tokens into `colors` prop. You can change color of border, background, danger color and more using `primary`, `error`, `text`, and so on.
77
*/
88
export function Colors() {
99
return (
10-
<Box width="100%">
11-
<Box display="flex" flexWrap="wrap" gap="12px" marginBottom="16px">
10+
<Box w="100%">
11+
<Flex flexWrap="wrap" gap="12px" mb="16px">
1212
<Button
13-
className={css({ height: 'min-content' })}
13+
className={css({ h: 'min-content' })}
1414
colors={{
1515
primary: 'orange',
1616
text: 'chocolate',
@@ -19,7 +19,7 @@ export function Colors() {
1919
Default
2020
</Button>
2121
<Button
22-
className={css({ height: 'min-content' })}
22+
className={css({ h: 'min-content' })}
2323
colors={{
2424
primary: 'orange',
2525
text: 'chocolate',
@@ -29,7 +29,7 @@ export function Colors() {
2929
Primary
3030
</Button>
3131
<Button
32-
className={css({ height: 'min-content' })}
32+
className={css({ h: 'min-content' })}
3333
colors={{
3434
error: 'orange',
3535
text: 'chocolate',
@@ -38,10 +38,10 @@ export function Colors() {
3838
>
3939
Danger
4040
</Button>
41-
</Box>
42-
<Box display="flex" flexWrap="wrap" gap="12px" marginBottom="16px">
41+
</Flex>
42+
<Flex flexWrap="wrap" gap="12px" mb="16px">
4343
<Button
44-
className={css({ height: 'min-content' })}
44+
className={css({ h: 'min-content' })}
4545
colors={{
4646
primary: 'darkgreen',
4747
text: 'darkseagreen',
@@ -50,7 +50,7 @@ export function Colors() {
5050
Default
5151
</Button>
5252
<Button
53-
className={css({ height: 'min-content' })}
53+
className={css({ h: 'min-content' })}
5454
colors={{
5555
primary: 'darkgreen',
5656
text: 'darkseagreen',
@@ -60,7 +60,7 @@ export function Colors() {
6060
Primary
6161
</Button>
6262
<Button
63-
className={css({ height: 'min-content' })}
63+
className={css({ h: 'min-content' })}
6464
colors={{
6565
error: 'darkgreen',
6666
text: 'darkseagreen',
@@ -69,18 +69,18 @@ export function Colors() {
6969
>
7070
Danger
7171
</Button>
72-
</Box>
73-
<Box display="flex" flexWrap="wrap" gap="12px" marginBottom="16px">
72+
</Flex>
73+
<Flex flexWrap="wrap" gap="12px" mb="16px">
7474
<Button
75-
className={css({ height: 'min-content' })}
75+
className={css({ h: 'min-content' })}
7676
colors={{
7777
primary: 'steelblue',
7878
}}
7979
>
8080
Default
8181
</Button>
8282
<Button
83-
className={css({ height: 'min-content' })}
83+
className={css({ h: 'min-content' })}
8484
colors={{
8585
primary: 'steelblue',
8686
}}
@@ -89,15 +89,15 @@ export function Colors() {
8989
Primary
9090
</Button>
9191
<Button
92-
className={css({ height: 'min-content' })}
92+
className={css({ h: 'min-content' })}
9393
colors={{
9494
error: 'steelblue',
9595
}}
9696
danger
9797
>
9898
Danger
9999
</Button>
100-
</Box>
100+
</Flex>
101101
</Box>
102102
)
103103
}

‎apps/landing/src/app/(detail)/components/button/demo/Danger.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@ import { Box, css } from '@devup-ui/react'
77
*/
88
export function Danger() {
99
return (
10-
<Box width="100%">
10+
<Box w="100%">
1111
<Box display="flex" flexWrap="wrap" gap="12px" marginBottom="16px">
12-
<Button className={css({ height: 'min-content' })} danger size="sm">
12+
<Button className={css({ h: 'min-content' })} danger size="sm">
1313
Danger sm
1414
</Button>
15-
<Button className={css({ height: 'min-content' })} danger size="md">
15+
<Button className={css({ h: 'min-content' })} danger size="md">
1616
Danger md
1717
</Button>
18-
<Button className={css({ height: 'min-content' })} danger size="lg">
18+
<Button className={css({ h: 'min-content' })} danger size="lg">
1919
Danger lg
2020
</Button>
2121
</Box>

‎apps/landing/src/app/(detail)/components/button/demo/Disabled.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { Button } from '@devup-ui/components'
2-
import { Box, css } from '@devup-ui/react'
2+
import { Box, css, Flex } from '@devup-ui/react'
33

44
/**
55
* **Disabled**
66
* Use `disabled` prop to show disabled UI of the button.
77
*/
88
export function Disabled() {
99
return (
10-
<Box width="100%">
11-
<Box display="flex" flexWrap="wrap" gap="12px" marginBottom="16px">
10+
<Box w="100%">
11+
<Flex flexWrap="wrap" gap="12px" mb="16px">
1212
<Button
1313
className={css({ height: 'min-content' })}
1414
disabled
@@ -19,7 +19,7 @@ export function Disabled() {
1919
<Button className={css({ height: 'min-content' })} disabled>
2020
Default disabled
2121
</Button>
22-
</Box>
22+
</Flex>
2323
</Box>
2424
)
2525
}

‎apps/landing/src/app/(detail)/components/button/demo/Icon.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Button } from '@devup-ui/components'
2-
import { Box, css } from '@devup-ui/react'
2+
import { Box, css, Flex } from '@devup-ui/react'
33

44
import IconDelete from '../IconDelete'
55

@@ -9,10 +9,10 @@ import IconDelete from '../IconDelete'
99
*/
1010
export function Icon() {
1111
return (
12-
<Box width="100%">
13-
<Box display="flex" flexWrap="wrap" gap="12px" marginBottom="16px">
12+
<Box w="100%">
13+
<Flex flexWrap="wrap" gap="12px" mb="16px">
1414
<Button
15-
className={css({ height: 'min-content' })}
15+
className={css({ h: 'min-content' })}
1616
icon={
1717
<svg
1818
fill="none"
@@ -34,7 +34,7 @@ export function Icon() {
3434
</Button>
3535

3636
<Button
37-
className={css({ height: 'min-content' })}
37+
className={css({ h: 'min-content' })}
3838
icon={
3939
<svg
4040
fill="none"
@@ -54,13 +54,13 @@ export function Icon() {
5454
Add
5555
</Button>
5656
<Button
57-
className={css({ height: 'min-content' })}
57+
className={css({ h: 'min-content' })}
5858
danger
5959
icon={<IconDelete />}
6060
>
6161
Delete
6262
</Button>
63-
</Box>
63+
</Flex>
6464
</Box>
6565
)
6666
}

0 commit comments

Comments
 (0)