112 lines
2.7 KiB
TypeScript
112 lines
2.7 KiB
TypeScript
import { define } from '../../src'
|
|
import { Layout } from './helpers'
|
|
import { theme } from './themes'
|
|
import { ButtonExamplesContent } from '../button'
|
|
import { ProfileExamplesContent } from '../profile'
|
|
import { NavigationExamplesContent } from '../navigation'
|
|
import { FormExamplesContent } from '../form'
|
|
|
|
const P = define('SSR_P', {
|
|
color: theme('colors-fgMuted'),
|
|
fontSize: 16,
|
|
marginBottom: theme('spacing-xxl'),
|
|
})
|
|
|
|
const ExamplesGrid = define('SSR_ExamplesGrid', {
|
|
display: 'grid',
|
|
gap: theme('spacing-lg'),
|
|
gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))'
|
|
})
|
|
|
|
const ExampleCard = define('SSR_ExampleCard', {
|
|
base: 'a',
|
|
|
|
background: theme('colors-bgElevated'),
|
|
padding: theme('spacing-lg'),
|
|
border: `1px solid ${theme('colors-border')}`,
|
|
borderRadius: theme('radius-sm'),
|
|
textDecoration: 'none',
|
|
display: 'block',
|
|
|
|
states: {
|
|
hover: {
|
|
borderColor: theme('colors-borderActive'),
|
|
}
|
|
},
|
|
|
|
parts: {
|
|
H2: {
|
|
color: theme('colors-fg'),
|
|
margin: `0 0 ${theme('spacing-sm')} 0`,
|
|
fontSize: 18,
|
|
fontWeight: 400,
|
|
},
|
|
P: {
|
|
color: theme('colors-fgMuted'),
|
|
margin: 0,
|
|
fontSize: 14,
|
|
}
|
|
},
|
|
|
|
render({ props: { title, desc, ...rest }, parts: { Root, H2, P } }) {
|
|
return (
|
|
<Root {...rest}>
|
|
<H2>{title}</H2>
|
|
<P>{desc}</P>
|
|
</Root>
|
|
)
|
|
}
|
|
})
|
|
|
|
export const IndexPage = ({ path }: any) => (
|
|
<Layout title="Forge Examples" path={path}>
|
|
<P>Server-rendered demos. View source to see the static CSS.</P>
|
|
|
|
<ExamplesGrid>
|
|
<ExampleCard href="/ssr/profile"
|
|
title="Profile Card"
|
|
desc="Parts, variants, custom render. Size/theme switching."
|
|
/>
|
|
|
|
<ExampleCard href="/ssr/buttons"
|
|
title="Buttons"
|
|
desc="Intent, size, disabled states. Basic variant patterns."
|
|
/>
|
|
|
|
<ExampleCard href="/ssr/navigation"
|
|
title="Navigation"
|
|
desc="Tabs, pills, breadcrumbs, vertical nav. No router required."
|
|
/>
|
|
|
|
<ExampleCard href="/ssr/form"
|
|
title="Forms"
|
|
desc="Inputs, validation states, checkboxes, textareas."
|
|
/>
|
|
</ExamplesGrid>
|
|
</Layout>
|
|
)
|
|
|
|
export const ButtonExamplesPage = ({ path }: any) => (
|
|
<Layout title="Forge Button Component Examples" path={path}>
|
|
<ButtonExamplesContent />
|
|
</Layout>
|
|
)
|
|
|
|
export const ProfileExamplesPage = ({ path }: any) => (
|
|
<Layout title="Forge Profile Examples" path={path}>
|
|
<ProfileExamplesContent />
|
|
</Layout>
|
|
)
|
|
|
|
export const NavigationExamplesPage = ({ path }: any) => (
|
|
<Layout title="Forge Navigation Examples" path={path}>
|
|
<NavigationExamplesContent />
|
|
</Layout>
|
|
)
|
|
|
|
export const FormExamplesPage = ({ path }: any) => (
|
|
<Layout title="Forge Form Examples" path={path}>
|
|
<FormExamplesContent />
|
|
</Layout>
|
|
)
|