Skip to content

Commit 200013a

Browse files
forestreamforestream
committed
Publish button component mdx page
1 parent ab132a7 commit 200013a

File tree

14 files changed

+873
-10
lines changed

14 files changed

+873
-10
lines changed

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import { VStack } from '@devup-ui/react'
22

3-
export default function Card({ children }: { children: React.ReactNode }) {
3+
export default function Card({
4+
children,
5+
className,
6+
...props
7+
}: React.ComponentProps<'div'>) {
48
return (
59
<VStack
610
_active={{
@@ -13,8 +17,11 @@ export default function Card({ children }: { children: React.ReactNode }) {
1317
bg="$containerBackground"
1418
border="1px solid $border"
1519
borderRadius="10px"
20+
className={className}
1621
cursor="pointer"
22+
styleOrder={1}
1723
transition="all 0.2s ease"
24+
{...props}
1825
>
1926
{children}
2027
</VStack>

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { css } from '@devup-ui/react'
2+
3+
import Card from './Card'
4+
5+
export default function MdxCard({ children }: { children: React.ReactNode }) {
6+
return (
7+
<Card
8+
className={css({
9+
_active: {
10+
transform: 'none',
11+
},
12+
_hover: {
13+
boxShadow: 'none',
14+
},
15+
borderRadius: '10px',
16+
border: '1px solid $border',
17+
bg: '$containerBackground',
18+
maxWidth: '100%',
19+
cursor: 'default',
20+
marginBottom: '20px',
21+
_lastChild: {
22+
marginBottom: '0',
23+
},
24+
})}
25+
>
26+
{children}
27+
</Card>
28+
)
29+
}

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
'use client'
2+
3+
import { Box, Center, Flex, Text, VStack } from '@devup-ui/react'
4+
import { useState } from 'react'
5+
6+
import IconCode from '@/components/icons/IconCode'
7+
8+
export default function MdxCardFooter({
9+
children,
10+
}: {
11+
children: React.ReactNode
12+
}) {
13+
const [isOpen, setIsOpen] = useState(false)
14+
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%"
23+
>
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+
maxW="100%"
48+
overflow="auto"
49+
px="24px"
50+
py="32px"
51+
>
52+
{children}
53+
</Box>
54+
)}
55+
</VStack>
56+
</>
57+
)
58+
}

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

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import { Box, css } from '@devup-ui/react'
2+
import clsx from 'clsx'
3+
4+
export function Table({
5+
children,
6+
className,
7+
...props
8+
}: React.ComponentProps<'table'>) {
9+
return (
10+
<Box
11+
as="table"
12+
className={clsx(
13+
css({
14+
border: 'none',
15+
styleOrder: 1,
16+
}),
17+
className,
18+
)}
19+
selectors={{
20+
'& th, & td': {
21+
border: 'none',
22+
},
23+
}}
24+
{...props}
25+
>
26+
{children}
27+
</Box>
28+
)
29+
}
30+
31+
export function Tr({ children, ...props }: React.ComponentProps<'tr'>) {
32+
return (
33+
<Box
34+
as="tr"
35+
className={css({
36+
borderTop: '1px solid $border',
37+
borderBottom: '1px solid $border',
38+
})}
39+
{...props}
40+
>
41+
{children}
42+
</Box>
43+
)
44+
}
45+
46+
export function Td({
47+
children,
48+
className,
49+
...props
50+
}: React.ComponentProps<'td'>) {
51+
return (
52+
<Box
53+
as="td"
54+
className={clsx(
55+
css({
56+
border: 'none',
57+
py: '14px',
58+
px: '20px',
59+
width: 'fit-content',
60+
styleOrder: 1,
61+
}),
62+
className,
63+
)}
64+
{...props}
65+
>
66+
{children}
67+
</Box>
68+
)
69+
}
70+
71+
export function Th({
72+
children,
73+
className,
74+
...props
75+
}: React.ComponentProps<'th'>) {
76+
return (
77+
<Box
78+
as="th"
79+
border="none"
80+
className={clsx(
81+
css({
82+
py: '14px',
83+
px: '20px',
84+
color: '$captionBold',
85+
typography: 'bodyBold',
86+
borderTop: '1px solid $border',
87+
borderBottom: '1px solid $border',
88+
bg: '$cardBg',
89+
textAlign: 'left',
90+
styleOrder: 1,
91+
}),
92+
className,
93+
)}
94+
{...props}
95+
>
96+
{children}
97+
</Box>
98+
)
99+
}

‎apps/landing/src/app/(detail)/components/button/Api.mdx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { Td, Th, Tr, Table } from '../Table'
2+
3+
4+
###### API
5+
`Button` props extends the button HTML attributes.
6+
<div style={{ overflow: 'auto', width: '100%' }}>
7+
<Table style={{width: '100%'}}>
8+
<Tr>
9+
<Th>Property</Th>
10+
<Th>Description</Th>
11+
<Th>Type</Th>
12+
<Th>Default</Th>
13+
</Tr>
14+
<Tr>
15+
<Td>variant</Td>
16+
<Td>The variant of the button</Td>
17+
<Td>`'primary' | 'default'`</Td>
18+
<Td>`'default'`</Td>
19+
</Tr>
20+
<Tr>
21+
<Td>colors</Td>
22+
<Td>The color variables of the button, i.e. `var(--primary)`</Td>
23+
<Td>
24+
```
25+
{
26+
primary?: string
27+
error?: string
28+
text?: string
29+
border?: string
30+
inputBackground?: string
31+
primaryFocus?: string
32+
}
33+
```
34+
</Td>
35+
<Td>`undefined`</Td>
36+
</Tr>
37+
<Tr>
38+
<Td>danger</Td>
39+
<Td>Signals that it should be used with caution. It is often used in a delete button or to show the error status.</Td>
40+
<Td>`boolean`</Td>
41+
<Td>`false`</Td>
42+
</Tr>
43+
<Tr>
44+
<Td>size</Td>
45+
<Td>The size of the button</Td>
46+
<Td>`'sm' | 'md' | 'lg'`</Td>
47+
<Td>`'md'`</Td>
48+
</Tr>
49+
<Tr>
50+
<Td>icon</Td>
51+
<Td>Icon of the button passed in as a form of ReactNode</Td>
52+
<Td>`React.ReactNode`</Td>
53+
<Td>`undefined`</Td>
54+
</Tr>
55+
<Tr>
56+
<Td>ellipsis</Td>
57+
<Td>
58+
Whether the button text should be truncated with an ellipsis. The
59+
button should have a width to be able to truncate the text.
60+
</Td>
61+
<Td>`boolean`</Td>
62+
<Td>`false`</Td>
63+
</Tr>
64+
</Table>
65+
</div>

‎apps/landing/src/app/(detail)/components/button/Button.mdx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import IconDelete from './IconDelete'
2+
import { Button } from '@devup-ui/components'
3+
import { Td, Th, Tr, Table } from '../Table'
4+
import MdxCard from '../MdxCard'
5+
import MdxCardFooter from '../MdxCardFooter'
6+
7+
**Button**
8+
9+
#### Button
10+
11+
`Button` component is used to handle user interactions.

0 commit comments

Comments
 (0)