Chris Wanstrath
0cad100197
/ |/ \ / \ / \ / | $$$$$$$$//$$$$$$ |$$$$$$$ |/$$$$$$ |$$$$$$$$/ $$ |__ $$ | $$ |$$ |__$$ |$$ | _$$/ $$ |__ $$ | $$ | $$ |$$ $$< $$ |/ |$$ | $$$$$/ $$ | $$ |$$$$$$$ |$$ |$$$$ |$$$$$/ $$ | $$ \__$$ |$$ | $$ |$$ \__$$ |$$ |_____ $$ | $$ $$/ $$ | $$ |$$ $$/ $$ | $$/ $$$$$$/ $$/ $$/ $$$$$$/ $$$$$$$$/
72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
import { define } from 'forge'
|
|
import { theme } from './theme'
|
|
|
|
export const Box = define('Box', {
|
|
// Base box - minimal styling, designed for customization via style prop
|
|
})
|
|
|
|
export const RedBox = define('RedBox', {
|
|
background: theme('colors-red'),
|
|
color: theme('colors-bg'),
|
|
padding: theme('spacing-1'),
|
|
textAlign: 'center',
|
|
})
|
|
|
|
export const GreenBox = define('GreenBox', {
|
|
background: theme('colors-success'),
|
|
color: theme('colors-bg'),
|
|
padding: theme('spacing-1'),
|
|
textAlign: 'center',
|
|
})
|
|
|
|
export const BlueBox = define('BlueBox', {
|
|
background: theme('colors-blue'),
|
|
color: theme('colors-bg'),
|
|
padding: theme('spacing-1'),
|
|
textAlign: 'center',
|
|
})
|
|
|
|
export const GrayBox = define('GrayBox', {
|
|
background: theme('colors-bgMuted'),
|
|
padding: theme('spacing-4'),
|
|
})
|
|
|
|
export const Test = () => {
|
|
return (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '32px', padding: '24px' }}>
|
|
<div>
|
|
<h2 style={{ fontSize: '20px', fontWeight: 'bold', marginBottom: '16px' }}>Box Component</h2>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
|
|
<Box style={{ background: '#3b82f6', color: '#ffffff', padding: '16px' }}>
|
|
Basic Box with custom background and text color
|
|
</Box>
|
|
<Box style={{ padding: '8px', border: '2px solid #d1d5db', borderRadius: '8px' }}>
|
|
Box with padding and border
|
|
</Box>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 style={{ fontSize: '20px', fontWeight: 'bold', marginBottom: '16px' }}>Color Variants</h2>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
|
|
<RedBox>Red Box</RedBox>
|
|
<GreenBox>Green Box</GreenBox>
|
|
<BlueBox>Blue Box</BlueBox>
|
|
<GrayBox>Gray Box</GrayBox>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 style={{ fontSize: '20px', fontWeight: 'bold', marginBottom: '16px' }}>Nested Boxes</h2>
|
|
<Box style={{ background: '#f3f4f6', padding: '16px' }}>
|
|
<Box style={{ background: '#e5e7eb', padding: '12px' }}>
|
|
<Box style={{ background: '#d1d5db', padding: '8px' }}>
|
|
Nested boxes demonstration
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|