111 lines
2.7 KiB
TypeScript
111 lines
2.7 KiB
TypeScript
import { define } from '../../src'
|
|
import { Layout, theme } from './helpers'
|
|
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}px 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>
|
|
)
|