design-system

1"use client"
2 
3import { useState } from "react";
4import { Header } from "./components/header"
5import { Footer } from "./components/footer";
6import { Badge } from "@/components/ui/badge";
7import { Separator } from "@/components/ui/separator";
8import { 
9  Bell, 
10  Search, 
11  Plus, 
12  Trash2, 
13  Edit, 
14  Settings, 
15  User, 
16  Download,
17  ChevronRight,
18  Star,
19  Heart,
20  Share2,
21  MoreVertical
22} from "lucide-react";
23import { DesignTokens } from "./components/tokens";
24import { TailwindColorPalettes } from "./components/palettes";
25 
26export function DesignSystem() {
27  const [switchChecked, setSwitchChecked] = useState(false);
28  const [checkboxChecked, setCheckboxChecked] = useState(false);
29  const [progress, setProgress] = useState(33);
30  const [sliderValue, setSliderValue] = useState([50]);
31 
32  return (
33    <div className="min-h-screen bg-background">
34    {/* <Toaster /> */}
35 
36    {/* Header */}
37      <Header />
38 
39    {/* Main Content */}
40      <main className="container py-12 px-8">
41        <div className="max-w-5xl mx-auto space-y-12">
42 
43          {/* Hero Section */}
44          <header className="space-y-4">
45            <Badge variant="secondary">Component Library</Badge>
46            <h1 className="text-4xl tracking-tight">Modern UI Primitives</h1>
47            <p className="text-xl text-muted-foreground max-w-3xl">
48              A comprehensive collection of accessible, customizable, and production-ready React components built with Radix UI and Tailwind CSS.
49            </p>
50          </header>
51 
52          <Separator />
53          {/* Design Tokens Section */}
54          <DesignTokens />
55          <Separator />
56          {/* Tailwind Color Palettes Section */}
57          <TailwindColorPalettes />
58 
59        </div>
60      </main>
61    {/* Footer */}
62      <Footer />
63 
64    </div>
65  );
66}