diff --git a/apps/site/app/playground/page.tsx b/apps/site/app/playground/page.tsx index 5fc6c92f7..6a1dd4c0c 100644 --- a/apps/site/app/playground/page.tsx +++ b/apps/site/app/playground/page.tsx @@ -52,35 +52,165 @@ const DEFAULT_SCHEMA = { const EXAMPLE_SCHEMAS = { basic: DEFAULT_SCHEMA, form: { - type: "div", - className: "space-y-4 max-w-md", + type: "card", + className: "max-w-2xl mx-auto", children: [ { - type: "text", - content: "Contact Form", - className: "text-2xl font-bold mb-4" - }, - { - type: "input", - name: "name", - placeholder: "Your name" - }, - { - type: "input", - name: "email", - inputType: "email", - placeholder: "your@email.com" - }, - { - type: "textarea", - name: "message", - placeholder: "Your message", - rows: 4 - }, - { - type: "button", - variant: "default", - label: "Submit" + type: "div", + className: "p-6 space-y-6", + children: [ + { + type: "div", + className: "space-y-2", + children: [ + { + type: "text", + content: "Contact Us", + className: "text-3xl font-bold" + }, + { + type: "text", + content: "Fill out the form below and we'll get back to you soon.", + className: "text-muted-foreground" + } + ] + }, + { + type: "separator" + }, + { + type: "div", + className: "grid grid-cols-2 gap-4", + children: [ + { + type: "div", + className: "space-y-2", + children: [ + { + type: "label", + htmlFor: "firstName", + label: "First Name" + }, + { + type: "input", + id: "firstName", + name: "firstName", + placeholder: "John" + } + ] + }, + { + type: "div", + className: "space-y-2", + children: [ + { + type: "label", + htmlFor: "lastName", + label: "Last Name" + }, + { + type: "input", + id: "lastName", + name: "lastName", + placeholder: "Doe" + } + ] + } + ] + }, + { + type: "div", + className: "space-y-2", + children: [ + { + type: "label", + htmlFor: "email", + label: "Email Address" + }, + { + type: "input", + id: "email", + name: "email", + inputType: "email", + placeholder: "john.doe@example.com" + } + ] + }, + { + type: "div", + className: "space-y-2", + children: [ + { + type: "label", + htmlFor: "subject", + label: "Subject" + }, + { + type: "select", + id: "subject", + name: "subject", + placeholder: "Select a subject", + options: [ + { label: "General Inquiry", value: "general" }, + { label: "Technical Support", value: "support" }, + { label: "Sales", value: "sales" }, + { label: "Partnership", value: "partnership" } + ] + } + ] + }, + { + type: "div", + className: "space-y-2", + children: [ + { + type: "label", + htmlFor: "message", + label: "Message" + }, + { + type: "textarea", + id: "message", + name: "message", + placeholder: "Tell us more about your inquiry...", + rows: 5 + } + ] + }, + { + type: "div", + className: "flex items-center gap-2", + children: [ + { + type: "checkbox", + id: "newsletter", + name: "newsletter" + }, + { + type: "label", + htmlFor: "newsletter", + label: "Subscribe to our newsletter" + } + ] + }, + { + type: "div", + className: "flex gap-3", + children: [ + { + type: "button", + variant: "default", + label: "Send Message", + className: "flex-1" + }, + { + type: "button", + variant: "outline", + label: "Reset" + } + ] + } + ] } ] }, @@ -89,13 +219,35 @@ const EXAMPLE_SCHEMAS = { className: "space-y-6", children: [ { - type: "text", - content: "Dashboard", - className: "text-3xl font-bold" + type: "div", + className: "flex items-center justify-between", + children: [ + { + type: "div", + children: [ + { + type: "text", + content: "Analytics Dashboard", + className: "text-3xl font-bold" + }, + { + type: "text", + content: "Overview of your business metrics", + className: "text-muted-foreground mt-1" + } + ] + }, + { + type: "button", + variant: "outline", + label: "Download Report", + icon: "Download" + } + ] }, { type: "grid", - columns: 3, + columns: 4, gap: 4, children: [ { @@ -103,14 +255,41 @@ const EXAMPLE_SCHEMAS = { className: "p-6", children: [ { - type: "text", - content: "Total Users", - className: "text-sm text-muted-foreground" + type: "div", + className: "flex items-center justify-between mb-2", + children: [ + { + type: "text", + content: "Total Revenue", + className: "text-sm font-medium text-muted-foreground" + }, + { + type: "icon", + name: "DollarSign", + className: "h-4 w-4 text-muted-foreground" + } + ] }, { type: "text", - content: "1,234", - className: "text-2xl font-bold mt-2" + content: "$45,231.89", + className: "text-2xl font-bold" + }, + { + type: "div", + className: "flex items-center gap-1 mt-2", + children: [ + { + type: "text", + content: "+20.1%", + className: "text-sm font-medium text-green-600" + }, + { + type: "text", + content: "from last month", + className: "text-sm text-muted-foreground" + } + ] } ] }, @@ -119,14 +298,41 @@ const EXAMPLE_SCHEMAS = { className: "p-6", children: [ { - type: "text", - content: "Revenue", - className: "text-sm text-muted-foreground" + type: "div", + className: "flex items-center justify-between mb-2", + children: [ + { + type: "text", + content: "Active Users", + className: "text-sm font-medium text-muted-foreground" + }, + { + type: "icon", + name: "Users", + className: "h-4 w-4 text-muted-foreground" + } + ] }, { type: "text", - content: "$12,345", - className: "text-2xl font-bold mt-2" + content: "2,350", + className: "text-2xl font-bold" + }, + { + type: "div", + className: "flex items-center gap-1 mt-2", + children: [ + { + type: "text", + content: "+180.1%", + className: "text-sm font-medium text-green-600" + }, + { + type: "text", + content: "from last month", + className: "text-sm text-muted-foreground" + } + ] } ] }, @@ -134,15 +340,361 @@ const EXAMPLE_SCHEMAS = { type: "card", className: "p-6", children: [ + { + type: "div", + className: "flex items-center justify-between mb-2", + children: [ + { + type: "text", + content: "Sales", + className: "text-sm font-medium text-muted-foreground" + }, + { + type: "icon", + name: "CreditCard", + className: "h-4 w-4 text-muted-foreground" + } + ] + }, { type: "text", - content: "Active Projects", - className: "text-sm text-muted-foreground" + content: "+12,234", + className: "text-2xl font-bold" + }, + { + type: "div", + className: "flex items-center gap-1 mt-2", + children: [ + { + type: "text", + content: "+19%", + className: "text-sm font-medium text-green-600" + }, + { + type: "text", + content: "from last month", + className: "text-sm text-muted-foreground" + } + ] + } + ] + }, + { + type: "card", + className: "p-6", + children: [ + { + type: "div", + className: "flex items-center justify-between mb-2", + children: [ + { + type: "text", + content: "Active Now", + className: "text-sm font-medium text-muted-foreground" + }, + { + type: "icon", + name: "Activity", + className: "h-4 w-4 text-muted-foreground" + } + ] }, { type: "text", - content: "42", - className: "text-2xl font-bold mt-2" + content: "+573", + className: "text-2xl font-bold" + }, + { + type: "div", + className: "flex items-center gap-1 mt-2", + children: [ + { + type: "text", + content: "+201", + className: "text-sm font-medium text-green-600" + }, + { + type: "text", + content: "since last hour", + className: "text-sm text-muted-foreground" + } + ] + } + ] + } + ] + }, + { + type: "grid", + columns: 2, + gap: 4, + children: [ + { + type: "card", + children: [ + { + type: "div", + className: "p-6", + children: [ + { + type: "text", + content: "Recent Activity", + className: "text-xl font-semibold mb-4" + }, + { + type: "div", + className: "space-y-4", + children: [ + { + type: "div", + className: "flex items-start gap-4", + children: [ + { + type: "avatar", + fallback: "JD", + className: "h-10 w-10" + }, + { + type: "div", + className: "flex-1 space-y-1", + children: [ + { + type: "text", + content: "John Doe made a purchase", + className: "text-sm font-medium" + }, + { + type: "text", + content: "2 minutes ago", + className: "text-xs text-muted-foreground" + } + ] + }, + { + type: "badge", + label: "New", + variant: "default" + } + ] + }, + { + type: "div", + className: "flex items-start gap-4", + children: [ + { + type: "avatar", + fallback: "SM", + className: "h-10 w-10" + }, + { + type: "div", + className: "flex-1 space-y-1", + children: [ + { + type: "text", + content: "Sarah Miller subscribed", + className: "text-sm font-medium" + }, + { + type: "text", + content: "10 minutes ago", + className: "text-xs text-muted-foreground" + } + ] + }, + { + type: "badge", + label: "Pro", + variant: "secondary" + } + ] + }, + { + type: "div", + className: "flex items-start gap-4", + children: [ + { + type: "avatar", + fallback: "RJ", + className: "h-10 w-10" + }, + { + type: "div", + className: "flex-1 space-y-1", + children: [ + { + type: "text", + content: "Robert Johnson commented", + className: "text-sm font-medium" + }, + { + type: "text", + content: "1 hour ago", + className: "text-xs text-muted-foreground" + } + ] + }, + { + type: "badge", + label: "Comment", + variant: "outline" + } + ] + } + ] + } + ] + } + ] + }, + { + type: "card", + children: [ + { + type: "div", + className: "p-6", + children: [ + { + type: "text", + content: "Top Products", + className: "text-xl font-semibold mb-4" + }, + { + type: "div", + className: "space-y-4", + children: [ + { + type: "div", + className: "flex items-center justify-between", + children: [ + { + type: "div", + className: "flex items-center gap-3", + children: [ + { + type: "div", + className: "h-10 w-10 rounded bg-blue-100 dark:bg-blue-900 flex items-center justify-center", + children: [ + { + type: "icon", + name: "Smartphone", + className: "h-5 w-5 text-blue-600 dark:text-blue-400" + } + ] + }, + { + type: "div", + children: [ + { + type: "text", + content: "iPhone 15 Pro", + className: "text-sm font-medium" + }, + { + type: "text", + content: "1,234 sales", + className: "text-xs text-muted-foreground" + } + ] + } + ] + }, + { + type: "text", + content: "$999", + className: "font-semibold" + } + ] + }, + { + type: "div", + className: "flex items-center justify-between", + children: [ + { + type: "div", + className: "flex items-center gap-3", + children: [ + { + type: "div", + className: "h-10 w-10 rounded bg-purple-100 dark:bg-purple-900 flex items-center justify-center", + children: [ + { + type: "icon", + name: "Laptop", + className: "h-5 w-5 text-purple-600 dark:text-purple-400" + } + ] + }, + { + type: "div", + children: [ + { + type: "text", + content: "MacBook Pro", + className: "text-sm font-medium" + }, + { + type: "text", + content: "856 sales", + className: "text-xs text-muted-foreground" + } + ] + } + ] + }, + { + type: "text", + content: "$1,999", + className: "font-semibold" + } + ] + }, + { + type: "div", + className: "flex items-center justify-between", + children: [ + { + type: "div", + className: "flex items-center gap-3", + children: [ + { + type: "div", + className: "h-10 w-10 rounded bg-green-100 dark:bg-green-900 flex items-center justify-center", + children: [ + { + type: "icon", + name: "Headphones", + className: "h-5 w-5 text-green-600 dark:text-green-400" + } + ] + }, + { + type: "div", + children: [ + { + type: "text", + content: "AirPods Pro", + className: "text-sm font-medium" + }, + { + type: "text", + content: "542 sales", + className: "text-xs text-muted-foreground" + } + ] + } + ] + }, + { + type: "text", + content: "$249", + className: "font-semibold" + } + ] + } + ] + } + ] } ] } @@ -150,58 +702,476 @@ const EXAMPLE_SCHEMAS = { } ] }, - list: { + dataTable: { type: "div", - className: "space-y-4 max-w-2xl", + className: "space-y-4", children: [ { - type: "text", - content: "Task List", - className: "text-2xl font-bold mb-4" + type: "div", + className: "flex items-center justify-between", + children: [ + { + type: "div", + children: [ + { + type: "text", + content: "User Management", + className: "text-3xl font-bold" + }, + { + type: "text", + content: "Manage your team members and their roles", + className: "text-muted-foreground mt-1" + } + ] + }, + { + type: "button", + variant: "default", + label: "Add User", + icon: "Plus" + } + ] }, { type: "card", - className: "divide-y", children: [ { type: "div", - className: "p-4 flex items-center gap-3", + className: "p-6", children: [ { - type: "checkbox", - name: "task1" + type: "table", + columns: [ + { + header: "User", + accessorKey: "user" + }, + { + header: "Email", + accessorKey: "email" + }, + { + header: "Role", + accessorKey: "role" + }, + { + header: "Status", + accessorKey: "status" + }, + { + header: "Actions", + accessorKey: "actions" + } + ], + data: [ + { + user: "John Doe", + email: "john@example.com", + role: "Admin", + status: "Active", + actions: "•••" + }, + { + user: "Jane Smith", + email: "jane@example.com", + role: "Editor", + status: "Active", + actions: "•••" + }, + { + user: "Bob Johnson", + email: "bob@example.com", + role: "Viewer", + status: "Inactive", + actions: "•••" + }, + { + user: "Alice Williams", + email: "alice@example.com", + role: "Editor", + status: "Active", + actions: "•••" + }, + { + user: "Charlie Brown", + email: "charlie@example.com", + role: "Viewer", + status: "Active", + actions: "•••" + } + ], + hoverable: true, + striped: true + } + ] + } + ] + }, + { + type: "div", + className: "flex items-center justify-between", + children: [ + { + type: "text", + content: "Showing 1 to 5 of 50 results", + className: "text-sm text-muted-foreground" + }, + { + type: "pagination", + currentPage: 1, + totalPages: 10 + } + ] + } + ] + }, + ecommerce: { + type: "div", + className: "space-y-6", + children: [ + { + type: "div", + className: "flex items-center justify-between", + children: [ + { + type: "text", + content: "Featured Products", + className: "text-3xl font-bold" + }, + { + type: "div", + className: "flex gap-2", + children: [ + { + type: "button", + variant: "outline", + label: "Filter", + icon: "Filter" }, { - type: "text", - content: "Complete documentation" + type: "button", + variant: "outline", + label: "Sort", + icon: "ArrowUpDown" + } + ] + } + ] + }, + { + type: "grid", + columns: 3, + gap: 6, + children: [ + { + type: "card", + className: "overflow-hidden", + children: [ + { + type: "div", + className: "aspect-square bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-900 dark:to-blue-800 flex items-center justify-center", + children: [ + { + type: "icon", + name: "Smartphone", + className: "h-20 w-20 text-blue-600 dark:text-blue-400" + } + ] + }, + { + type: "div", + className: "p-4 space-y-3", + children: [ + { + type: "div", + className: "flex items-start justify-between", + children: [ + { + type: "div", + children: [ + { + type: "text", + content: "iPhone 15 Pro", + className: "font-semibold text-lg" + }, + { + type: "text", + content: "Latest flagship phone", + className: "text-sm text-muted-foreground" + } + ] + }, + { + type: "badge", + label: "New", + variant: "default" + } + ] + }, + { + type: "div", + className: "flex items-center gap-2", + children: [ + { + type: "text", + content: "$999", + className: "text-2xl font-bold" + }, + { + type: "text", + content: "$1,099", + className: "text-sm text-muted-foreground line-through" + } + ] + }, + { + type: "div", + className: "flex items-center gap-1", + children: [ + { + type: "icon", + name: "Star", + className: "h-4 w-4 fill-yellow-400 text-yellow-400" + }, + { + type: "icon", + name: "Star", + className: "h-4 w-4 fill-yellow-400 text-yellow-400" + }, + { + type: "icon", + name: "Star", + className: "h-4 w-4 fill-yellow-400 text-yellow-400" + }, + { + type: "icon", + name: "Star", + className: "h-4 w-4 fill-yellow-400 text-yellow-400" + }, + { + type: "icon", + name: "Star", + className: "h-4 w-4 text-gray-300" + }, + { + type: "text", + content: "(128 reviews)", + className: "text-sm text-muted-foreground ml-1" + } + ] + }, + { + type: "button", + variant: "default", + label: "Add to Cart", + className: "w-full" + } + ] } ] }, { - type: "div", - className: "p-4 flex items-center gap-3", + type: "card", + className: "overflow-hidden", children: [ { - type: "checkbox", - name: "task2" + type: "div", + className: "aspect-square bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900 dark:to-purple-800 flex items-center justify-center", + children: [ + { + type: "icon", + name: "Laptop", + className: "h-20 w-20 text-purple-600 dark:text-purple-400" + } + ] }, { - type: "text", - content: "Review pull requests" + type: "div", + className: "p-4 space-y-3", + children: [ + { + type: "div", + className: "flex items-start justify-between", + children: [ + { + type: "div", + children: [ + { + type: "text", + content: "MacBook Pro 16\"", + className: "font-semibold text-lg" + }, + { + type: "text", + content: "M3 Max, 36GB RAM", + className: "text-sm text-muted-foreground" + } + ] + }, + { + type: "badge", + label: "Hot", + variant: "destructive" + } + ] + }, + { + type: "div", + className: "flex items-center gap-2", + children: [ + { + type: "text", + content: "$2,499", + className: "text-2xl font-bold" + } + ] + }, + { + type: "div", + className: "flex items-center gap-1", + children: [ + { + type: "icon", + name: "Star", + className: "h-4 w-4 fill-yellow-400 text-yellow-400" + }, + { + type: "icon", + name: "Star", + className: "h-4 w-4 fill-yellow-400 text-yellow-400" + }, + { + type: "icon", + name: "Star", + className: "h-4 w-4 fill-yellow-400 text-yellow-400" + }, + { + type: "icon", + name: "Star", + className: "h-4 w-4 fill-yellow-400 text-yellow-400" + }, + { + type: "icon", + name: "Star", + className: "h-4 w-4 fill-yellow-400 text-yellow-400" + }, + { + type: "text", + content: "(256 reviews)", + className: "text-sm text-muted-foreground ml-1" + } + ] + }, + { + type: "button", + variant: "default", + label: "Add to Cart", + className: "w-full" + } + ] } ] }, { - type: "div", - className: "p-4 flex items-center gap-3", + type: "card", + className: "overflow-hidden", children: [ { - type: "checkbox", - name: "task3" + type: "div", + className: "aspect-square bg-gradient-to-br from-green-100 to-green-200 dark:from-green-900 dark:to-green-800 flex items-center justify-center", + children: [ + { + type: "icon", + name: "Headphones", + className: "h-20 w-20 text-green-600 dark:text-green-400" + } + ] }, { - type: "text", - content: "Deploy to production" + type: "div", + className: "p-4 space-y-3", + children: [ + { + type: "div", + className: "flex items-start justify-between", + children: [ + { + type: "div", + children: [ + { + type: "text", + content: "AirPods Pro", + className: "font-semibold text-lg" + }, + { + type: "text", + content: "Active noise cancellation", + className: "text-sm text-muted-foreground" + } + ] + } + ] + }, + { + type: "div", + className: "flex items-center gap-2", + children: [ + { + type: "text", + content: "$249", + className: "text-2xl font-bold" + }, + { + type: "text", + content: "$279", + className: "text-sm text-muted-foreground line-through" + } + ] + }, + { + type: "div", + className: "flex items-center gap-1", + children: [ + { + type: "icon", + name: "Star", + className: "h-4 w-4 fill-yellow-400 text-yellow-400" + }, + { + type: "icon", + name: "Star", + className: "h-4 w-4 fill-yellow-400 text-yellow-400" + }, + { + type: "icon", + name: "Star", + className: "h-4 w-4 fill-yellow-400 text-yellow-400" + }, + { + type: "icon", + name: "Star", + className: "h-4 w-4 fill-yellow-400 text-yellow-400" + }, + { + type: "icon", + name: "Star", + className: "h-4 w-4 fill-yellow-400 text-yellow-400" + }, + { + type: "text", + content: "(89 reviews)", + className: "text-sm text-muted-foreground ml-1" + } + ] + }, + { + type: "button", + variant: "default", + label: "Add to Cart", + className: "w-full" + } + ] } ] } @@ -300,19 +1270,28 @@ export default function PlaygroundPage() {
Examples:
- {(Object.keys(EXAMPLE_SCHEMAS) as Array).map((key) => ( - - ))} + {(Object.keys(EXAMPLE_SCHEMAS) as Array).map((key) => { + const labels: Record = { + basic: 'Basic', + form: 'Form', + dashboard: 'Dashboard', + dataTable: 'Data Table', + ecommerce: 'E-commerce' + }; + return ( + + ); + })}