diff --git a/components/design-scaffolds.tsx b/components/design-scaffolds.tsx index 7feaede..1d91726 100644 --- a/components/design-scaffolds.tsx +++ b/components/design-scaffolds.tsx @@ -1,5 +1,7 @@ "use client"; +import { useState } from "react"; + /** * Design scaffolds — styled React mockups showing what each UI library * looks like for a given surface. Used in the Design page preview area. @@ -12,63 +14,243 @@ // Shared mock data // --------------------------------------------------------------------------- -const NAV_ITEMS = ["Dashboard", "Projects", "Analytics", "Settings"]; const TABLE_ROWS = [ - { name: "Alice Martin", email: "alice@co.com", status: "Active", date: "Jan 12" }, - { name: "Ben Walsh", email: "ben@co.com", status: "Pending", date: "Jan 14" }, - { name: "Clara Kim", email: "clara@co.com", status: "Active", date: "Jan 15" }, - { name: "David Osei", email: "david@co.com", status: "Inactive", date: "Jan 16" }, + { name: "Alice Martin", email: "alice@co.com", role: "Admin", status: "Active", date: "Jan 12" }, + { name: "Ben Walsh", email: "ben@co.com", role: "Member", status: "Pending", date: "Jan 14" }, + { name: "Clara Kim", email: "clara@co.com", role: "Member", status: "Active", date: "Jan 15" }, + { name: "David Osei", email: "david@co.com", role: "Viewer", status: "Inactive", date: "Jan 16" }, ]; +type Page = "Dashboard" | "Users" | "Settings"; +const PAGES: Page[] = ["Dashboard", "Users", "Settings"]; + // --------------------------------------------------------------------------- -// WEB APP scaffolds +// WEB APP — shadcn // --------------------------------------------------------------------------- +function ShadcnDashboard() { + return ( +
+
+ {["Total Revenue", "Active Users", "Conversions"].map((label, i) => ( +
+

{label}

+

{["$12,400", "2,841", "18.2%"][i]}

+

+{[12, 8, 3][i]}% from last month

+
+ ))} +
+
+
+ Revenue +
+
+ {[40,60,45,75,65,85,70,90,55,80,75,95].map((h,i)=>( +
+ ))} +
+
+
+
Recent activity
+ {TABLE_ROWS.slice(0,3).map(r=>( +
+
+

{r.name}

{r.email}

+ {r.status} +
+ ))} +
+
+ ); +} + +function ShadcnUsers() { + return ( +
+
+
+ Team members +
+ +
Invite
+
+
+ + {["Name","Role","Status","Joined",""].map(h=>)} + {TABLE_ROWS.map(r=>( + + + + + + + + ))} +
{h}
+

{r.name}

{r.email}

+
{r.role}{r.status}{r.date}
···
+
+
+ ); +} + +function ShadcnSettings() { + return ( +
+
+
General
+
+ {[{l:"Workspace name",v:"Acme Inc"},{l:"Slug",v:"acme-inc"},{l:"Email",v:"admin@acme.com"}].map(f=>( +
+ + +
+ ))} +
Save changes
+
+
+
+
Notifications
+
+ {["Email digests","Push notifications","Security alerts","Product updates"].map((label,i)=>( +
+

{label}

Receive {label.toLowerCase()}

+
+
+
+
+ ))} +
+
+
+ ); +} + export function WebAppShadcn() { + const [page, setPage] = useState("Dashboard"); + const NAV_ITEMS: { label: Page; icon: string }[] = [ + { label: "Dashboard", icon: "▦" }, + { label: "Users", icon: "◎" }, + { label: "Settings", icon: "⚙" }, + ]; return (
- {/* Sidebar */} -
+
Acme Inc
- {NAV_ITEMS.map((item, i) => ( -
-
- {item} + {NAV_ITEMS.map(({ label, icon }) => ( + + ))} +
+
+
+ {page} +
+
Export
+
+ New
+
+
+ {page === "Dashboard" && } + {page === "Users" && } + {page === "Settings" && } +
+
+ ); +} + +function MantineDashboard() { + return ( +
+
+ {[{l:"Total Revenue",v:"$12,400",c:"#2f9e44"},{l:"Active Users",v:"2,841",c:"#228be6"},{l:"Conversions",v:"18.2%",c:"#e67700"}].map(item=>( +
+

{item.l}

+

{item.v}

+

↑ trending up

))}
- {/* Main */} -
-
- Dashboard -
-
Export
-
New project
+
+
Monthly revenue
+
+ {[40,60,45,75,65,85,70,90,55,80,75,95].map((h,i)=>( +
+ ))} +
+
+
+
Recent
+ {TABLE_ROWS.slice(0,3).map(r=>( +
+
+

{r.name}

{r.email}

+ {r.status} +
+ ))} +
+
+ ); +} + +function MantineUsers() { + return ( +
+
+
+ Team members +
+ +
-
-
- {["Total Revenue", "Active Users", "Conversions"].map((label, i) => ( -
-

{label}

-

{["$12,400", "2,841", "18.2%"][i]}

-

+{[12, 8, 3][i]}% from last month

-
- ))} -
-
-
- Recent activity -
Filter
+ + {["Member","Role","Status","Joined","Actions"].map(h=>)} + {TABLE_ROWS.map(r=>( + + + + + + + + ))} +
{h}

{r.name}

{r.email}

{r.role}{r.status}{r.date}
+
+
+ ); +} + +function MantineSettings() { + return ( +
+
+
Workspace
+
+ {[{l:"Name",v:"Acme Inc"},{l:"Slug",v:"acme-inc"},{l:"Email",v:"admin@acme.com"}].map(f=>( +
+ +
- - {["Name","Email","Status","Date"].map(h=>)} - {TABLE_ROWS.map(r=>)} -
{h}
{r.name}{r.email}{r.status}{r.date}
-
+ ))} + +
+
+
+
Notifications
+
+ {["Email digests","Push notifications","Security alerts","Product updates"].map((label,i)=>( +
+

{label}

Get notified via {label.split(" ")[0].toLowerCase()}

+
+
+
+
+ ))}
@@ -76,48 +258,131 @@ export function WebAppShadcn() { } export function WebAppMantine() { + const [page, setPage] = useState("Dashboard"); + const NAV: { label: Page; icon: string }[] = [ + { label: "Dashboard", icon: "▦" }, + { label: "Users", icon: "◎" }, + { label: "Settings", icon: "⚙" }, + ]; return (
-
+
Acme Inc
- {NAV_ITEMS.map((item, i) => ( -
-
- {item} + {NAV.map(({ label, icon }) => ( + + ))} +
+
+
+ {page} +
+ + +
+
+ {page === "Dashboard" && } + {page === "Users" && } + {page === "Settings" && } +
+
+ ); +} + +function HeroUIDashboard() { + return ( +
+
+ {["Revenue","Users","Conversion"].map((label,i)=>( +
+

{label}

+

{["$12,400","2,841","18.2%"][i]}

+

+{[12,8,3][i]}% this month

))}
-
-
- Dashboard +
+
Revenue
+
+ {[40,60,45,75,65,85,70,90,55,80,75,95].map((h,i)=>( +
+ ))} +
+
+
+
Recent activity
+ {TABLE_ROWS.slice(0,3).map(r=>( +
+
+

{r.name}

{r.email}

+ {r.status} +
+ ))} +
+
+ ); +} + +function HeroUIUsers() { + return ( +
+
+
+ Team members
- - + +
-
-
- {["Total Revenue","Active Users","Conversions"].map((label,i)=>( -
-

{label}

-

{["$12,400","2,841","18.2%"][i]}

-

↑ {[12,8,3][i]}% this month

-
- ))} -
-
-
- Users - + + {["Member","Role","Status","Joined",""].map(h=>)} + {TABLE_ROWS.map(r=>( + + + + + + + + ))} +
{h}

{r.name}

{r.email}

{r.role}{r.status}{r.date}
+
+
+ ); +} + +function HeroUISettings() { + return ( +
+
+
Profile
+
+ {[{l:"Workspace name",v:"Acme Inc"},{l:"Slug",v:"acme-inc"},{l:"Email",v:"admin@acme.com"}].map(f=>( +
+ +
- - {["Name","Email","Status","Date"].map(h=>)} - {TABLE_ROWS.map(r=>)} -
{h}
{r.name}{r.email}{r.status}{r.date}
-
+ ))} + +
+
+
+
Notifications
+
+ {["Email digests","Push notifications","Security alerts","Product updates"].map((label,i)=>( +
+

{label}

+
+
+
+
+ ))}
@@ -125,98 +390,174 @@ export function WebAppMantine() { } export function WebAppHeroUI() { + const [page, setPage] = useState("Dashboard"); + const NAV: { label: Page; icon: string }[] = [ + { label: "Dashboard", icon: "▦" }, + { label: "Users", icon: "◎" }, + { label: "Settings", icon: "⚙" }, + ]; return (
-
+
Acme Inc
- {NAV_ITEMS.map((item, i) => ( -
-
- {item} + {NAV.map(({ label, icon }) => ( + + ))} +
+
+
+ {page} +
+ + +
+
+ {page === "Dashboard" && } + {page === "Users" && } + {page === "Settings" && } +
+
+ ); +} + +function TremorDashboard() { + return ( +
+
+ {[{l:"Revenue",v:"$12,400",c:"#2563eb",bg:"#dbeafe",pct:65},{l:"Users",v:"2,841",c:"#7c3aed",bg:"#ede9fe",pct:48},{l:"Conversion",v:"18.2%",c:"#059669",bg:"#d1fae5",pct:72}].map(item=>( +
+
+

{item.l}

+
+
+

{item.v}

+
))}
-
-
- Dashboard -
- - -
+
+

Revenue over time

+
+ {[40,65,55,80,70,90,75,85,60,95,80,100].map((h,i)=>( +
+ ))}
-
-
- {["Total Revenue","Active Users","Conversions"].map((label,i)=>( -
-

{label}

-

{["$12,400","2,841","18.2%"][i]}

-

+{[12,8,3][i]}% from last month

-
- ))} +
+ {["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"].map(m=>{m})} +
+
+
+ {TABLE_ROWS.slice(0,3).map(r=>( +
+
+ {r.name} + {r.role}
-
-
- Recent activity - + ))} +
+
+ ); +} + +function TremorUsers() { + return ( +
+
+ {[{l:"Total",v:"2,841",c:"#2563eb"},{l:"Active",v:"1,940",c:"#059669"},{l:"Pending",v:"647",c:"#d97706"},{l:"Inactive",v:"254",c:"#6b7280"}].map(s=>( +
+
+

{s.l}

{s.v}

+
+ ))} +
+
+
+ All users + +
+ + {["Name","Role","Status","Date"].map(h=>)} + {TABLE_ROWS.map(r=>( + + + + + + + ))} +
{h}
{r.name}{r.role}
{r.status}
{r.date}
+
+
+ ); +} + +function TremorSettings() { + return ( +
+
+

Workspace

+
+ {[{l:"Name",v:"Acme Inc"},{l:"Domain",v:"acme.com"},{l:"Timezone",v:"UTC-8"}].map(f=>( +
+ +
- - {["Name","Email","Status","Date"].map(h=>)} - {TABLE_ROWS.map(r=>)} -
{h}
{r.name}{r.email}{r.status}{r.date}
-
+ ))} +
+
+

Alerts

+ {["Email digests","Anomaly alerts","Weekly report","API warnings"].map((label,i)=>( +
+

{label}

+
+
+
+
+ ))} +
); } export function WebAppTremor() { + const [page, setPage] = useState("Dashboard"); + const NAV: { label: Page; icon: string }[] = [ + { label: "Dashboard", icon: "▦" }, + { label: "Users", icon: "◎" }, + { label: "Settings", icon: "⚙" }, + ]; return (
-
+
Acme Inc
- {NAV_ITEMS.map((item, i) => ( -
-
- {item} -
+ {NAV.map(({ label, icon }) => ( + ))}
-
-
- Overview -
-
-
- {[{l:"Revenue",v:"$12,400",c:"#2563eb",bg:"#dbeafe"},{l:"Users",v:"2,841",c:"#7c3aed",bg:"#ede9fe"},{l:"Conversion",v:"18.2%",c:"#059669",bg:"#d1fae5"}].map(item=>( -
-
-

{item.l}

-
-
-

{item.v}

-
-
- ))} -
-
-

Revenue over time

-
- {[40,65,55,80,70,90,75,85,60,95,80,100].map((h,i)=>( -
- ))} -
-
- {["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"].map(m=>{m})} -
-
+
+
+ {page} +
+ {page === "Dashboard" && } + {page === "Users" && } + {page === "Settings" && }
);