From 454750047c4ebf2c876a8a7993d7fc23ebd4d395 Mon Sep 17 00:00:00 2001 From: Chris Wanstrath Date: Fri, 26 Dec 2025 21:59:44 -0800 Subject: [PATCH] convert examples index --- examples/index.tsx | 149 ++++++++++++++++++++++----------------------- 1 file changed, 72 insertions(+), 77 deletions(-) diff --git a/examples/index.tsx b/examples/index.tsx index 32ffbc3..eaf35dc 100644 --- a/examples/index.tsx +++ b/examples/index.tsx @@ -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 +

{title}

+

{desc}

+ + } +}) + export const IndexPage = () => ( - - - - - Forge Examples -