forked from defunkt/howl
Chris Wanstrath
0cad100197
/ |/ \ / \ / \ / | $$$$$$$$//$$$$$$ |$$$$$$$ |/$$$$$$ |$$$$$$$$/ $$ |__ $$ | $$ |$$ |__$$ |$$ | _$$/ $$ |__ $$ | $$ | $$ |$$ $$< $$ |/ |$$ | $$$$$/ $$ | $$ |$$$$$$$ |$$ |$$$$ |$$$$$/ $$ | $$ \__$$ |$$ | $$ |$$ \__$$ |$$ |_____ $$ | $$ $$/ $$ | $$ |$$ $$/ $$ | $$/ $$$$$$/ $$/ $$/ $$$$$$/ $$$$$$$$/
52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
import { define } from 'forge'
|
|
import { theme } from './theme'
|
|
|
|
export const Section = define('Section', {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
padding: theme('spacing-6'),
|
|
|
|
variants: {
|
|
gap: {
|
|
0: { gap: 0 },
|
|
1: { gap: theme('spacing-1') },
|
|
2: { gap: theme('spacing-2') },
|
|
3: { gap: theme('spacing-3') },
|
|
4: { gap: theme('spacing-4') },
|
|
6: { gap: theme('spacing-6') },
|
|
8: { gap: theme('spacing-8') },
|
|
12: { gap: theme('spacing-12') },
|
|
},
|
|
},
|
|
})
|
|
|
|
export const Test = () => {
|
|
return (
|
|
<div>
|
|
<Section>
|
|
<h2 style={{ fontSize: '20px', fontWeight: 'bold' }}>Default Section</h2>
|
|
<p>This is a section with default styling</p>
|
|
<p>It has padding and vertical spacing between children</p>
|
|
</Section>
|
|
|
|
<Section gap={4}>
|
|
<h2 style={{ fontSize: '20px', fontWeight: 'bold' }}>Compact Section</h2>
|
|
<p>This section has a smaller gap (4)</p>
|
|
<p>Items are closer together</p>
|
|
</Section>
|
|
|
|
<Section gap={12}>
|
|
<h2 style={{ fontSize: '20px', fontWeight: 'bold' }}>Spacious Section</h2>
|
|
<p>This section has a larger gap (12)</p>
|
|
<p>Items have more breathing room</p>
|
|
</Section>
|
|
|
|
<Section style={{ backgroundColor: '#f3f4f6', maxWidth: '600px' }}>
|
|
<h2 style={{ fontSize: '20px', fontWeight: 'bold' }}>Constrained Width Section</h2>
|
|
<p>This section has a max width of 600px and a gray background</p>
|
|
<p>Good for centering content on wide screens</p>
|
|
</Section>
|
|
</div>
|
|
)
|
|
}
|