feat: first approach from tanel
This commit is contained in:
488
components/design-system/component-matrix.tsx
Normal file
488
components/design-system/component-matrix.tsx
Normal file
@@ -0,0 +1,488 @@
|
||||
"use client"
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select"
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import {
|
||||
Plus,
|
||||
Trash2,
|
||||
Settings,
|
||||
Mail,
|
||||
Send,
|
||||
Download,
|
||||
Search,
|
||||
X,
|
||||
Check,
|
||||
ChevronRight,
|
||||
Edit,
|
||||
Copy
|
||||
} from "lucide-react"
|
||||
|
||||
export function ComponentMatrix() {
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<div className="space-y-10">
|
||||
{/* Buttons - All Variants */}
|
||||
<div>
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
Buttons — Variants
|
||||
</h4>
|
||||
<div className="border border-border rounded-md p-6 bg-card">
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
|
||||
<div className="space-y-2">
|
||||
<p className="font-sans text-xs text-muted-foreground">Primary</p>
|
||||
<Button>Primary</Button>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="font-sans text-xs text-muted-foreground">Secondary</p>
|
||||
<Button variant="secondary">Secondary</Button>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="font-sans text-xs text-muted-foreground">Outline</p>
|
||||
<Button variant="outline">Outline</Button>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="font-sans text-xs text-muted-foreground">Ghost</p>
|
||||
<Button variant="ghost">Ghost</Button>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="font-sans text-xs text-muted-foreground">Link</p>
|
||||
<Button variant="link">Link</Button>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="font-sans text-xs text-muted-foreground">Destructive</p>
|
||||
<Button variant="destructive">Destructive</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Buttons - Sizes */}
|
||||
<div>
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
Buttons — Sizes
|
||||
</h4>
|
||||
<div className="border border-border rounded-md p-6 bg-card">
|
||||
<div className="flex flex-wrap items-end gap-4">
|
||||
<div className="space-y-2">
|
||||
<p className="font-sans text-xs text-muted-foreground">Small</p>
|
||||
<Button size="sm">Small</Button>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="font-sans text-xs text-muted-foreground">Default</p>
|
||||
<Button size="default">Default</Button>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="font-sans text-xs text-muted-foreground">Large</p>
|
||||
<Button size="lg">Large</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Buttons - States */}
|
||||
<div>
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
Buttons — States
|
||||
</h4>
|
||||
<div className="border border-border rounded-md p-6 bg-card">
|
||||
<div className="space-y-6">
|
||||
{/* Primary States */}
|
||||
<div>
|
||||
<p className="font-sans text-xs text-muted-foreground mb-3">Primary</p>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button>Default</Button>
|
||||
<Button className="bg-primary/90">Hover</Button>
|
||||
<Button className="bg-primary/80">Active</Button>
|
||||
<Button className="ring-2 ring-ring ring-offset-2">Focus</Button>
|
||||
<Button disabled>Disabled</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Outline States */}
|
||||
<div>
|
||||
<p className="font-sans text-xs text-muted-foreground mb-3">Outline</p>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button variant="outline">Default</Button>
|
||||
<Button variant="outline" className="bg-accent/10">Hover</Button>
|
||||
<Button variant="outline" className="ring-2 ring-ring ring-offset-2 bg-transparent">Focus</Button>
|
||||
<Button variant="outline" disabled>Disabled</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Destructive States */}
|
||||
<div>
|
||||
<p className="font-sans text-xs text-muted-foreground mb-3">Destructive</p>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button variant="destructive">Default</Button>
|
||||
<Button variant="destructive" className="bg-destructive/90">Hover</Button>
|
||||
<Button variant="destructive" className="ring-2 ring-destructive/50 ring-offset-2">Focus</Button>
|
||||
<Button variant="destructive" disabled>Disabled</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Icon Buttons */}
|
||||
<div>
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
Icon Buttons
|
||||
</h4>
|
||||
<div className="border border-border rounded-md p-6 bg-card">
|
||||
<div className="space-y-6">
|
||||
{/* By Variant */}
|
||||
<div>
|
||||
<p className="font-sans text-xs text-muted-foreground mb-3">Variants</p>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button size="icon"><Plus className="h-4 w-4" /></Button>
|
||||
<Button variant="secondary" size="icon"><Settings className="h-4 w-4" /></Button>
|
||||
<Button variant="outline" size="icon"><Search className="h-4 w-4" /></Button>
|
||||
<Button variant="ghost" size="icon"><X className="h-4 w-4" /></Button>
|
||||
<Button variant="destructive" size="icon"><Trash2 className="h-4 w-4" /></Button>
|
||||
</div>
|
||||
</div>
|
||||
{/* By Size */}
|
||||
<div>
|
||||
<p className="font-sans text-xs text-muted-foreground mb-3">Sizes</p>
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<Button size="icon-sm" variant="outline"><Plus className="h-4 w-4" /></Button>
|
||||
<Button size="icon" variant="outline"><Plus className="h-4 w-4" /></Button>
|
||||
<Button size="icon-lg" variant="outline"><Plus className="h-4 w-4" /></Button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Disabled */}
|
||||
<div>
|
||||
<p className="font-sans text-xs text-muted-foreground mb-3">Disabled</p>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button size="icon" disabled><Plus className="h-4 w-4" /></Button>
|
||||
<Button variant="outline" size="icon" disabled><Settings className="h-4 w-4" /></Button>
|
||||
<Button variant="ghost" size="icon" disabled><X className="h-4 w-4" /></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Buttons with Icons */}
|
||||
<div>
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
Buttons with Icons
|
||||
</h4>
|
||||
<div className="border border-border rounded-md p-6 bg-card">
|
||||
<div className="space-y-6">
|
||||
{/* Leading Icons */}
|
||||
<div>
|
||||
<p className="font-sans text-xs text-muted-foreground mb-3">Leading Icon</p>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button><Plus className="h-4 w-4" /> Create New</Button>
|
||||
<Button variant="secondary"><Download className="h-4 w-4" /> Download</Button>
|
||||
<Button variant="outline"><Mail className="h-4 w-4" /> Send Email</Button>
|
||||
<Button variant="destructive"><Trash2 className="h-4 w-4" /> Delete</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Trailing Icons */}
|
||||
<div>
|
||||
<p className="font-sans text-xs text-muted-foreground mb-3">Trailing Icon</p>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button>Continue <ChevronRight className="h-4 w-4" /></Button>
|
||||
<Button variant="outline">Next Step <ChevronRight className="h-4 w-4" /></Button>
|
||||
<Button variant="secondary">Submit <Send className="h-4 w-4" /></Button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Size Variations */}
|
||||
<div>
|
||||
<p className="font-sans text-xs text-muted-foreground mb-3">Sizes with Icons</p>
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<Button size="sm"><Plus className="h-3.5 w-3.5" /> Small</Button>
|
||||
<Button size="default"><Plus className="h-4 w-4" /> Default</Button>
|
||||
<Button size="lg"><Plus className="h-5 w-5" /> Large</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Badges - Core Variants */}
|
||||
<div>
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
Badges — Core Variants
|
||||
</h4>
|
||||
<div className="border border-border rounded-md p-6 bg-card">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Badge>Default</Badge>
|
||||
<Badge variant="secondary">Secondary</Badge>
|
||||
<Badge variant="muted">Muted</Badge>
|
||||
<Badge variant="outline">Outline</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Badges - Tag & Value */}
|
||||
<div>
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
Badges — Tag & Value
|
||||
</h4>
|
||||
<div className="border border-border rounded-md p-6 bg-card">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Badge variant="tag">Tag</Badge>
|
||||
<Badge variant="tag">Category</Badge>
|
||||
<Badge variant="value">42</Badge>
|
||||
<Badge variant="value">$1,234</Badge>
|
||||
<Badge variant="value">100%</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Badges - Semantic */}
|
||||
<div>
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
Badges — Semantic
|
||||
</h4>
|
||||
<div className="border border-border rounded-md p-6 bg-card">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Badge variant="success">Success</Badge>
|
||||
<Badge variant="warning">Warning</Badge>
|
||||
<Badge variant="destructive">Danger</Badge>
|
||||
<Badge variant="info">Info</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Badges - Channel Pills */}
|
||||
<div>
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
Badges — Channel Pills
|
||||
</h4>
|
||||
<div className="border border-border rounded-md p-6 bg-card">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Badge variant="whatsapp">WhatsApp</Badge>
|
||||
<Badge variant="email">Email</Badge>
|
||||
<Badge variant="telegram">Telegram</Badge>
|
||||
<Badge variant="zulip">Zulip</Badge>
|
||||
<Badge variant="platform">Platform</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Badges on Muted Surface */}
|
||||
<div>
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
Badges — On Muted Surface
|
||||
</h4>
|
||||
<div className="border border-border rounded-md p-6 bg-muted">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Badge>Default</Badge>
|
||||
<Badge variant="secondary">Secondary</Badge>
|
||||
<Badge variant="outline">Outline</Badge>
|
||||
<Badge variant="tag">Tag</Badge>
|
||||
<Badge variant="success">Success</Badge>
|
||||
<Badge variant="info">Info</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Inputs */}
|
||||
<div>
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
Inputs
|
||||
</h4>
|
||||
<div className="border border-border rounded-md p-6 bg-card">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="space-y-3">
|
||||
<p className="font-sans text-xs text-muted-foreground">Default</p>
|
||||
<Input placeholder="Enter your email" />
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<p className="font-sans text-xs text-muted-foreground">With Value</p>
|
||||
<Input defaultValue="user@greyhaven.ai" />
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<p className="font-sans text-xs text-muted-foreground">Disabled</p>
|
||||
<Input placeholder="Disabled input" disabled />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 pt-6 border-t border-border">
|
||||
<p className="font-sans text-xs text-muted-foreground mb-3">Textarea</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Textarea placeholder="Describe your project requirements..." />
|
||||
<Textarea placeholder="Disabled textarea" disabled />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Select */}
|
||||
<div>
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
Select
|
||||
</h4>
|
||||
<div className="border border-border rounded-md p-6 bg-card">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="space-y-3">
|
||||
<p className="font-sans text-xs text-muted-foreground">Default</p>
|
||||
<Select>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select an option" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="option1">Option 1</SelectItem>
|
||||
<SelectItem value="option2">Option 2</SelectItem>
|
||||
<SelectItem value="option3">Option 3</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<p className="font-sans text-xs text-muted-foreground">With Value</p>
|
||||
<Select defaultValue="option2">
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="option1">Option 1</SelectItem>
|
||||
<SelectItem value="option2">Option 2</SelectItem>
|
||||
<SelectItem value="option3">Option 3</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<p className="font-sans text-xs text-muted-foreground">Disabled</p>
|
||||
<Select disabled>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Disabled" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="option1">Option 1</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Checkboxes & Switches */}
|
||||
<div>
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
Checkboxes & Switches
|
||||
</h4>
|
||||
<div className="border border-border rounded-md p-6 bg-card">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="space-y-4">
|
||||
<p className="font-sans text-xs text-muted-foreground">Checkboxes</p>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox id="check1" />
|
||||
<Label htmlFor="check1" className="font-sans text-sm">Unchecked</Label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox id="check2" defaultChecked />
|
||||
<Label htmlFor="check2" className="font-sans text-sm">Checked</Label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox id="check3" disabled />
|
||||
<Label htmlFor="check3" className="font-sans text-sm text-muted-foreground">Disabled</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<p className="font-sans text-xs text-muted-foreground">Switches</p>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch id="switch1" />
|
||||
<Label htmlFor="switch1" className="font-sans text-sm">Off</Label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch id="switch2" defaultChecked />
|
||||
<Label htmlFor="switch2" className="font-sans text-sm">On</Label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch id="switch3" disabled />
|
||||
<Label htmlFor="switch3" className="font-sans text-sm text-muted-foreground">Disabled</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div>
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
Tabs
|
||||
</h4>
|
||||
<div className="border border-border rounded-md p-6 bg-card">
|
||||
<Tabs defaultValue="overview" className="w-full">
|
||||
<TabsList>
|
||||
<TabsTrigger value="overview">Overview</TabsTrigger>
|
||||
<TabsTrigger value="analytics">Analytics</TabsTrigger>
|
||||
<TabsTrigger value="settings">Settings</TabsTrigger>
|
||||
<TabsTrigger value="disabled" disabled>Disabled</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="overview" className="mt-4">
|
||||
<p className="font-serif text-muted-foreground">
|
||||
Overview content. This tab demonstrates the default active state.
|
||||
</p>
|
||||
</TabsContent>
|
||||
<TabsContent value="analytics" className="mt-4">
|
||||
<p className="font-serif text-muted-foreground">
|
||||
Analytics content. System metrics and performance data.
|
||||
</p>
|
||||
</TabsContent>
|
||||
<TabsContent value="settings" className="mt-4">
|
||||
<p className="font-serif text-muted-foreground">
|
||||
Settings content. Configuration options for your deployment.
|
||||
</p>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tooltips */}
|
||||
<div>
|
||||
<h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
|
||||
Tooltips
|
||||
</h4>
|
||||
<div className="border border-border rounded-md p-6 bg-card">
|
||||
<div className="flex gap-4">
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button variant="outline">Hover me</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p className="font-sans text-sm">This is a tooltip</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button variant="secondary">More info</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p className="font-sans text-sm">Additional information appears here</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user