63 lines
1.3 KiB
TypeScript
63 lines
1.3 KiB
TypeScript
import { define } from '@because/forge'
|
|
import { theme } from './theme'
|
|
import { Section } from './section'
|
|
import { H2 } from './text'
|
|
import { VStack } from './stack'
|
|
|
|
export const Divider = define('Divider', {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
margin: `${theme('spacing-4')} 0`,
|
|
|
|
parts: {
|
|
Line: {
|
|
flex: 1,
|
|
borderTop: `1px solid ${theme('colors-border')}`,
|
|
},
|
|
Text: {
|
|
base: 'span',
|
|
padding: `0 ${theme('spacing-3')}`,
|
|
fontSize: theme('fontSize-sm'),
|
|
color: theme('colors-fgMuted'),
|
|
background: theme('colors-bg'),
|
|
},
|
|
},
|
|
|
|
render({ props, parts: { Root, Line, Text } }) {
|
|
const { children, ...rest } = props
|
|
|
|
return (
|
|
<Root {...rest}>
|
|
<Line />
|
|
{children && (
|
|
<>
|
|
<Text>{children}</Text>
|
|
<Line />
|
|
</>
|
|
)}
|
|
</Root>
|
|
)
|
|
},
|
|
})
|
|
|
|
export const Test = () => {
|
|
return (
|
|
<Section gap={4} style={{ maxWidth: '448px', padding: '16px' }}>
|
|
<H2>Divider Examples</H2>
|
|
|
|
<VStack gap={0}>
|
|
<p>Would you like to continue</p>
|
|
<Divider>OR WOULD YOU LIKE TO</Divider>
|
|
<p>Submit to certain death</p>
|
|
</VStack>
|
|
|
|
{/* Just a line */}
|
|
<VStack gap={0}>
|
|
<p>Look a line</p>
|
|
<Divider />
|
|
<p>So cool, so straight!</p>
|
|
</VStack>
|
|
</Section>
|
|
)
|
|
}
|