defunkt/forge
1
0
Fork 0
Code Issues Pull Requests Activity

convert examples index

Browse Source
This commit is contained in:
Chris Wanstrath 2025-12-26 21:59:44 -08:00
parent 6b68c401f7
commit 454750047c
1 changed files with 72 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
examples/index.tsx
View File

@ -1,82 +1,77 @@
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 = () => ( export const IndexPage = () => (
<html> <Layout title="Forge Examples">
<head> <P>Explore component examples built with Forge</P>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Forge Examples</title>
<style dangerouslySetInnerHTML={{
__html: `
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin: 0;
padding: 40px 20px;
background: #f9fafb;
}
.container {
max-width: 800px;
margin: 0 auto;
}
h1 {
color: #111827;
margin-bottom: 16px;
}
p {
color: #6b7280;
font-size: 18px;
margin-bottom: 48px;
}
.examples-grid {
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.example-card {
background: white;
padding: 24px;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
text-decoration: none;
transition: all 0.2s ease;
display: block;
}
.example-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.example-card h2 {
color: #111827;
margin: 0 0 8px 0;
font-size: 20px;
}
.example-card p {
color: #6b7280;
margin: 0;
font-size: 14px;
}
`}} />
</head>
<body>
<div class="container">
<h1>Forge Examples</h1>
<p>Explore component examples built with Forge</p>
<div class="examples-grid"> <ExamplesGrid>
<a href="/profile" class="example-card"> <ExampleCard href="/profile"
<h2>Profile Card</h2> title="Profile Card"
<p>User profile component with variants for size, theme, and verified status</p> desc="User profile component with variants for size, theme, and verified status"
</a> />
<a href="/buttons" class="example-card"> <ExampleCard href="/buttons"
<h2>Buttons</h2> title="Buttons"
<p>Button component with intent, size, and disabled variants</p> desc="Button component with intent, size, and disabled variants"
</a> />
<a href="/navigation" class="example-card"> <ExampleCard href="/navigation"
<h2>Navigation</h2> title="Navigation"
<p>Navigation patterns including tabs, pills, vertical nav, and breadcrumbs</p> desc="Navigation patterns including tabs, pills, vertical nav, and breadcrumbs"
</a> />
</div> </ExamplesGrid>
</div> </Layout>
</body>
</html>
) )