255 lines
12 KiB
TypeScript
255 lines
12 KiB
TypeScript
|
import * as React from "react";
|
|||
|
|
import {
|
|||
|
|
Badge,
|
|||
|
|
Button,
|
|||
|
|
Card,
|
|||
|
|
CardContent,
|
|||
|
|
CardDescription,
|
|||
|
|
CardHeader,
|
|||
|
|
CardTitle,
|
|||
|
|
Checkbox,
|
|||
|
|
CommandPalette,
|
|||
|
|
Dialog,
|
|||
|
|
DialogContent,
|
|||
|
|
DialogDescription,
|
|||
|
|
DialogHeader,
|
|||
|
|
DialogTitle,
|
|||
|
|
DialogTrigger,
|
|||
|
|
DropdownMenu,
|
|||
|
|
DropdownMenuContent,
|
|||
|
|
DropdownMenuItem,
|
|||
|
|
DropdownMenuTrigger,
|
|||
|
|
EmptyState,
|
|||
|
|
FeatureGrid,
|
|||
|
|
FormField,
|
|||
|
|
Hero,
|
|||
|
|
Input,
|
|||
|
|
Label,
|
|||
|
|
Pagination,
|
|||
|
|
Pricing,
|
|||
|
|
Select,
|
|||
|
|
Skeleton,
|
|||
|
|
Spinner,
|
|||
|
|
StatCard,
|
|||
|
|
Switch,
|
|||
|
|
Table,
|
|||
|
|
TableBody,
|
|||
|
|
TableCell,
|
|||
|
|
TableHead,
|
|||
|
|
TableHeader,
|
|||
|
|
TableRow,
|
|||
|
|
Tabs,
|
|||
|
|
TabsContent,
|
|||
|
|
TabsList,
|
|||
|
|
TabsTrigger,
|
|||
|
|
Textarea,
|
|||
|
|
Toaster,
|
|||
|
|
Tooltip,
|
|||
|
|
TooltipContent,
|
|||
|
|
TooltipProvider,
|
|||
|
|
TooltipTrigger,
|
|||
|
|
AppShell,
|
|||
|
|
useTheme,
|
|||
|
|
} from "../src";
|
|||
|
|
import {
|
|||
|
|
BarChart3,
|
|||
|
|
Blocks,
|
|||
|
|
CheckCircle2,
|
|||
|
|
Command,
|
|||
|
|
CreditCard,
|
|||
|
|
LayoutDashboard,
|
|||
|
|
Moon,
|
|||
|
|
MoreHorizontal,
|
|||
|
|
Palette,
|
|||
|
|
Plus,
|
|||
|
|
Search,
|
|||
|
|
Settings,
|
|||
|
|
Sparkles,
|
|||
|
|
Sun,
|
|||
|
|
Users,
|
|||
|
|
} from "lucide-react";
|
|||
|
|
|
|||
|
|
type Page = "overview" | "components" | "marketing";
|
|||
|
|
|
|||
|
|
function Section({
|
|||
|
|
title,
|
|||
|
|
description,
|
|||
|
|
children,
|
|||
|
|
}: {
|
|||
|
|
title: string;
|
|||
|
|
description: string;
|
|||
|
|
children: React.ReactNode;
|
|||
|
|
}) {
|
|||
|
|
return (
|
|||
|
|
<section className="space-y-4">
|
|||
|
|
<div>
|
|||
|
|
<h2 className="font-display text-xl font-semibold">{title}</h2>
|
|||
|
|
<p className="mt-1 max-w-2xl text-sm text-muted">{description}</p>
|
|||
|
|
</div>
|
|||
|
|
{children}
|
|||
|
|
</section>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function ThemeButton() {
|
|||
|
|
const { resolvedTheme, toggleTheme } = useTheme();
|
|||
|
|
return (
|
|||
|
|
<Tooltip>
|
|||
|
|
<TooltipTrigger asChild>
|
|||
|
|
<Button type="button" variant="ghost" size="icon" onClick={toggleTheme} aria-label="Toggle color theme">
|
|||
|
|
{resolvedTheme === "dark" ? <Sun /> : <Moon />}
|
|||
|
|
</Button>
|
|||
|
|
</TooltipTrigger>
|
|||
|
|
<TooltipContent>Use {resolvedTheme === "dark" ? "light" : "dark"} mode</TooltipContent>
|
|||
|
|
</Tooltip>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function Overview() {
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-10">
|
|||
|
|
<div>
|
|||
|
|
<Badge variant="brand">Living design system</Badge>
|
|||
|
|
<h1 className="mt-3 font-display text-3xl font-bold tracking-tight sm:text-4xl">Warm, clear, dependable interfaces.</h1>
|
|||
|
|
<p className="mt-3 max-w-2xl text-muted">A single place to review brand tokens, responsive behavior, interaction states, and accessibility before changes reach consuming apps.</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
|
|||
|
|
<StatCard label="Components" animate={28} icon={<Blocks />} />
|
|||
|
|
<StatCard label="Accessibility" value="AA" intent="success" sub="Contrast-gated themes" icon={<CheckCircle2 />} />
|
|||
|
|
<StatCard label="Themes" value="3 modes" intent="brand" sub="Dark, light, and system" icon={<Palette />} />
|
|||
|
|
<StatCard label="Build" value="Typed" intent="brand" sub="ESM and declarations" icon={<Sparkles />} />
|
|||
|
|
</div>
|
|||
|
|
<Section title="Operational surface" description="Representative dashboard density, controls, and data presentation.">
|
|||
|
|
<Card>
|
|||
|
|
<CardHeader className="flex-row items-start justify-between">
|
|||
|
|
<div>
|
|||
|
|
<CardTitle>Recent workspaces</CardTitle>
|
|||
|
|
<CardDescription>Tables remain legible and horizontally scroll when space is constrained.</CardDescription>
|
|||
|
|
</div>
|
|||
|
|
<Button size="sm"><Plus />New workspace</Button>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent>
|
|||
|
|
<Table>
|
|||
|
|
<TableHeader>
|
|||
|
|
<TableRow><TableHead>Name</TableHead><TableHead>Owner</TableHead><TableHead>Status</TableHead><TableHead className="text-right">Members</TableHead></TableRow>
|
|||
|
|
</TableHeader>
|
|||
|
|
<TableBody>
|
|||
|
|
<TableRow><TableCell className="font-medium">Forge inventory</TableCell><TableCell>Jordan Lee</TableCell><TableCell><Badge variant="success">Healthy</Badge></TableCell><TableCell className="text-right">18</TableCell></TableRow>
|
|||
|
|
<TableRow><TableCell className="font-medium">Field operations</TableCell><TableCell>Sam Rivera</TableCell><TableCell><Badge variant="warning">Review</Badge></TableCell><TableCell className="text-right">12</TableCell></TableRow>
|
|||
|
|
<TableRow><TableCell className="font-medium">Quality portal</TableCell><TableCell>Alex Morgan</TableCell><TableCell><Badge>Draft</Badge></TableCell><TableCell className="text-right">7</TableCell></TableRow>
|
|||
|
|
</TableBody>
|
|||
|
|
</Table>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
</Section>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function Components() {
|
|||
|
|
const [notifications, setNotifications] = React.useState(true);
|
|||
|
|
const [page, setPage] = React.useState(2);
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-12">
|
|||
|
|
<div>
|
|||
|
|
<h1 className="font-display text-3xl font-bold tracking-tight">Components</h1>
|
|||
|
|
<p className="mt-2 text-muted">Every core state in one executable review surface.</p>
|
|||
|
|
</div>
|
|||
|
|
<Section title="Actions and status" description="Variants share predictable sizing, focus, disabled, and semantic foreground behavior.">
|
|||
|
|
<div className="flex flex-wrap gap-3">
|
|||
|
|
<Button>Primary</Button><Button variant="secondary">Secondary</Button><Button variant="outline">Outline</Button><Button variant="ghost">Ghost</Button><Button variant="danger">Delete</Button><Button disabled>Disabled</Button><Spinner label="Saving…" />
|
|||
|
|
</div>
|
|||
|
|
<div className="flex flex-wrap gap-2">
|
|||
|
|
<Badge variant="brand">Brand</Badge><Badge>Neutral</Badge><Badge variant="success">Success</Badge><Badge variant="warning">Warning</Badge><Badge variant="danger">Danger</Badge><Badge variant="outline">Outline</Badge>
|
|||
|
|
</div>
|
|||
|
|
</Section>
|
|||
|
|
<Section title="Forms" description="Field-level descriptions and errors are automatically associated with controls.">
|
|||
|
|
<Card className="max-w-2xl">
|
|||
|
|
<CardContent className="grid gap-5 pt-5 sm:grid-cols-2">
|
|||
|
|
<FormField label="Workspace name" description="Shown in the primary navigation."><Input placeholder="Forge inventory" /></FormField>
|
|||
|
|
<FormField label="Region" required>
|
|||
|
|
<Select defaultValue="" placeholder="Choose a region">
|
|||
|
|
<option value="">Not assigned</option>
|
|||
|
|
<optgroup label="Americas"><option value="us">United States</option><option value="ca">Canada</option></optgroup>
|
|||
|
|
<optgroup label="Europe"><option value="uk">United Kingdom</option></optgroup>
|
|||
|
|
</Select>
|
|||
|
|
</FormField>
|
|||
|
|
<FormField label="Summary" error="Add at least 20 characters" className="sm:col-span-2"><Textarea placeholder="What is this workspace for?" /></FormField>
|
|||
|
|
<Label className="mb-0 flex items-center gap-2 text-sm text-text"><Checkbox defaultChecked />Email weekly digest</Label>
|
|||
|
|
<Label className="mb-0 flex items-center justify-between gap-3 text-sm text-text">Notifications<Switch checked={notifications} onCheckedChange={setNotifications} /></Label>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
</Section>
|
|||
|
|
<Section title="Disclosure and navigation" description="Keyboard-friendly Radix foundations with branded surfaces.">
|
|||
|
|
<div className="flex flex-wrap gap-3">
|
|||
|
|
<Dialog>
|
|||
|
|
<DialogTrigger asChild><Button variant="outline">Open dialog</Button></DialogTrigger>
|
|||
|
|
<DialogContent><DialogHeader><DialogTitle>Invite collaborators</DialogTitle><DialogDescription>Send a secure invitation to this workspace.</DialogDescription></DialogHeader><FormField label="Email"><Input type="email" placeholder="name@example.com" /></FormField><Button className="mt-5 w-full">Send invitation</Button></DialogContent>
|
|||
|
|
</Dialog>
|
|||
|
|
<DropdownMenu>
|
|||
|
|
<DropdownMenuTrigger asChild><Button variant="outline">More actions<MoreHorizontal /></Button></DropdownMenuTrigger>
|
|||
|
|
<DropdownMenuContent><DropdownMenuItem>Duplicate</DropdownMenuItem><DropdownMenuItem>Archive</DropdownMenuItem><DropdownMenuItem className="text-danger">Delete</DropdownMenuItem></DropdownMenuContent>
|
|||
|
|
</DropdownMenu>
|
|||
|
|
</div>
|
|||
|
|
<Tabs defaultValue="details" className="max-w-2xl">
|
|||
|
|
<TabsList><TabsTrigger value="details">Details</TabsTrigger><TabsTrigger value="activity">Activity</TabsTrigger><TabsTrigger value="settings">Settings</TabsTrigger></TabsList>
|
|||
|
|
<TabsContent value="details"><Card><CardContent className="pt-5 text-sm text-muted">Overview content with a calm, raised surface.</CardContent></Card></TabsContent>
|
|||
|
|
<TabsContent value="activity"><EmptyState title="No activity yet" hint="Changes will appear here." /></TabsContent>
|
|||
|
|
<TabsContent value="settings"><div className="space-y-2"><Skeleton className="h-10 w-full" /><Skeleton className="h-24 w-full" /></div></TabsContent>
|
|||
|
|
</Tabs>
|
|||
|
|
<Pagination page={page} pageCount={6} onPageChange={setPage} className="max-w-xl" />
|
|||
|
|
</Section>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function Marketing() {
|
|||
|
|
return (
|
|||
|
|
<div className="-m-4 sm:-m-6">
|
|||
|
|
<Hero eyebrow="Shared foundation" title="Ship tools that look designed." subtitle="Product UI first, with a confident editorial brand layer when the moment calls for it." primaryCta={{ label: "Get started", href: "#pricing" }} secondaryCta={{ label: "View components", href: "#components" }} />
|
|||
|
|
<FeatureGrid heading="Built for real work" features={[
|
|||
|
|
{ icon: <Command />, title: "Fast by default", description: "Command-first patterns and predictable controls keep operators moving." },
|
|||
|
|
{ icon: <Palette />, title: "One visual language", description: "Generated tokens keep product and marketing surfaces in sync." },
|
|||
|
|
{ icon: <CheckCircle2 />, title: "Guarded quality", description: "Contrast, interaction, and packaging checks run before release." },
|
|||
|
|
]} />
|
|||
|
|
<div id="pricing">
|
|||
|
|
<Pricing heading="Simple plans" tiers={[
|
|||
|
|
{ name: "Starter", price: "$0", period: "month", features: ["One workspace", "Core components"], cta: { label: "Start free" } },
|
|||
|
|
{ name: "Team", price: "$24", period: "month", featured: true, description: "For active operators", features: ["Unlimited workspaces", "Priority support", "Advanced blocks"], cta: { label: "Choose Team" } },
|
|||
|
|
{ name: "Custom", price: "Let’s talk", features: ["Brand adaptation", "Migration support"], cta: { label: "Contact us" } },
|
|||
|
|
]} />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function Showcase() {
|
|||
|
|
const [page, setPage] = React.useState<Page>("overview");
|
|||
|
|
const nav = [
|
|||
|
|
{ label: "Overview", icon: <LayoutDashboard />, active: page === "overview", onClick: () => setPage("overview") },
|
|||
|
|
{ label: "Components", icon: <Blocks />, active: page === "components", onClick: () => setPage("components") },
|
|||
|
|
{ label: "Marketing", icon: <CreditCard />, active: page === "marketing", onClick: () => setPage("marketing") },
|
|||
|
|
];
|
|||
|
|
return (
|
|||
|
|
<TooltipProvider delayDuration={250}>
|
|||
|
|
<AppShell
|
|||
|
|
brand={<span className="flex items-center gap-2"><span className="size-2 rounded-full bg-brand shadow-glow" />UI Kit</span>}
|
|||
|
|
nav={nav}
|
|||
|
|
topbar={<><div className="flex min-w-0 items-center gap-2 text-sm text-muted"><Search className="size-4" /><span className="truncate">Review components, themes, and responsive states</span></div><div className="ml-auto flex items-center gap-1"><Badge variant="outline">v0.5 preview</Badge><ThemeButton /></div></>}
|
|||
|
|
footer={<div className="flex items-center gap-2"><Settings className="size-4" />Design settings</div>}
|
|||
|
|
>
|
|||
|
|
{page === "overview" && <Overview />}
|
|||
|
|
{page === "components" && <Components />}
|
|||
|
|
{page === "marketing" && <Marketing />}
|
|||
|
|
</AppShell>
|
|||
|
|
<CommandPalette actions={[
|
|||
|
|
{ id: "overview", label: "Open overview", group: "Navigate", icon: <BarChart3 />, onSelect: () => setPage("overview") },
|
|||
|
|
{ id: "components", label: "Open components", group: "Navigate", icon: <Blocks />, onSelect: () => setPage("components") },
|
|||
|
|
{ id: "marketing", label: "Open marketing blocks", group: "Navigate", icon: <Sparkles />, onSelect: () => setPage("marketing") },
|
|||
|
|
{ id: "users", label: "Invite collaborator", group: "Actions", icon: <Users />, onSelect: () => undefined },
|
|||
|
|
]} />
|
|||
|
|
<Toaster />
|
|||
|
|
</TooltipProvider>
|
|||
|
|
);
|
|||
|
|
}
|