78 lines
1.6 KiB
TypeScript
78 lines
1.6 KiB
TypeScript
import { define } from '../src'
|
|
|
|
import { Layout } from './helpers'
|
|
|
|
const P = define('P', {
|
|
color: '#6b7280',
|
|
fontSize: 18,
|
|
marginBottom: 48,
|
|
})
|
|
|
|
const ExamplesGrid = define('ExamplesGrid', {
|
|
display: 'grid',
|
|
gap: 20,
|
|
gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))'
|
|
})
|
|
|
|
const ExampleCard = define('ExampleCard', {
|
|
base: 'a',
|
|
|
|
background: 'white',
|
|
padding: 24,
|
|
borderRadius: 12,
|
|
boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
|
|
textDecoration: 'none',
|
|
transition: 'all 0.2s ease',
|
|
display: 'block',
|
|
|
|
states: {
|
|
hover: {
|
|
transform: 'translateY(-2px)',
|
|
boxShadow: '0 4px 12px rgba(0,0,0,0.15)'
|
|
}
|
|
},
|
|
|
|
parts: {
|
|
H2: {
|
|
color: '#111827',
|
|
margin: '0 0 8px 0',
|
|
fontSize: 20,
|
|
},
|
|
P: {
|
|
color: '#6b7280',
|
|
margin: 0,
|
|
fontSize: 14,
|
|
}
|
|
},
|
|
|
|
render({ props: { title, desc }, parts: { Root, H2, P } }) {
|
|
return <Root>
|
|
<H2>{title}</H2>
|
|
<P>{desc}</P>
|
|
</Root>
|
|
}
|
|
})
|
|
|
|
export const IndexPage = () => (
|
|
<Layout title="Forge Examples">
|
|
<P>Explore component examples built with Forge</P>
|
|
|
|
<ExamplesGrid>
|
|
<ExampleCard href="/profile"
|
|
title="Profile Card"
|
|
desc="User profile component with variants for size, theme, and verified status"
|
|
/>
|
|
|
|
<ExampleCard href="/buttons"
|
|
title="Buttons"
|
|
desc="Button component with intent, size, and disabled variants"
|
|
/>
|
|
|
|
<ExampleCard href="/navigation"
|
|
title="Navigation"
|
|
desc="Navigation patterns including tabs, pills, vertical nav, and breadcrumbs"
|
|
/>
|
|
</ExamplesGrid>
|
|
</Layout>
|
|
)
|