@dailyautomations/ui 1.1.0 → 1.4.0

package/examples/pages/ComponentsPage.tsx

@@ -0,0 +1,726 @@
+import { useState } from 'react'
+import {
+  // Common
+  Button,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  Input,
+  Badge,
+  Label,
+  Textarea,
+  Checkbox,
+
+  // UI
+  Alert,
+  AlertTitle,
+  AlertDescription,
+  Skeleton,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+  Switch,
+  Separator,
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  Progress,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  Table,
+  TableHeader,
+  TableBody,
+  TableHead,
+  TableRow,
+  TableCell,
+  RadioGroup,
+  RadioGroupItem,
+  Slider,
+
+  // Composite
+  EmptyState,
+  LoadingSpinner,
+  LoadingOverlay,
+  StatCard,
+  FilterBar,
+  FilterSelect,
+  FilterChip,
+
+  // Dialogs
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+  ConfirmDialog,
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogAction,
+  AlertDialogCancel,
+  Sheet,
+  SheetTrigger,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from '../../src'
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="mb-12">
+      <h2 className="text-2xl font-bold text-foreground mb-6 pb-2 border-b border-border">
+        {title}
+      </h2>
+      <div className="space-y-6">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+function ComponentCard({ title, description, children }: { title: string; description?: string; children: React.ReactNode }) {
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <CardTitle className="text-lg">{title}</CardTitle>
+        {description && <CardDescription>{description}</CardDescription>}
+      </CardHeader>
+      <CardContent>
+        {children}
+      </CardContent>
+    </Card>
+  )
+}
+
+export function ComponentsPage() {
+  const [switchChecked, setSwitchChecked] = useState(false)
+  const [checkboxChecked, setCheckboxChecked] = useState(false)
+  const [sliderValue, setSliderValue] = useState([50])
+  const [progressValue, setProgressValue] = useState(65)
+  const [confirmOpen, setConfirmOpen] = useState(false)
+  const [isCollapsibleOpen, setIsCollapsibleOpen] = useState(false)
+  const [selectedFilter, setSelectedFilter] = useState('')
+  const [activeFilters, setActiveFilters] = useState<string[]>(['React', 'TypeScript'])
+  const [cardSwitchOn, setCardSwitchOn] = useState(false)
+  const [dialogOpen, setDialogOpen] = useState(false)
+
+  return (
+    <TooltipProvider>
+      <div className="min-h-screen bg-background">
+        {/* Header */}
+        <div className="bg-card border-b border-border">
+          <div className="max-w-7xl mx-auto px-6 py-12">
+            <Badge className="mb-4 bg-primary/10 text-primary border-primary/30">
+              Component Library
+            </Badge>
+            <h1 className="text-4xl font-bold text-foreground mb-4">
+              @dailyautomations/ui
+            </h1>
+            <p className="text-xl text-muted-foreground max-w-2xl">
+              A comprehensive collection of React components built with Radix UI primitives,
+              styled with Tailwind CSS, and themed for the Daily ecosystem.
+            </p>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="max-w-7xl mx-auto px-6 py-12">
+
+          {/* Buttons */}
+          <Section title="Buttons">
+            <ComponentCard title="Button Variants" description="Different button styles for various contexts">
+              <div className="flex flex-wrap gap-3">
+                <Button>Default (Accent)</Button>
+                <Button variant="secondary">Secondary (Primary)</Button>
+                <Button variant="outline">Outline</Button>
+                <Button variant="ghost">Ghost</Button>
+                <Button variant="destructive">Destructive</Button>
+                <Button variant="link">Link</Button>
+              </div>
+            </ComponentCard>
+
+            <ComponentCard title="Button Sizes">
+              <div className="flex flex-wrap items-center gap-3">
+                <Button size="sm">Small</Button>
+                <Button size="default">Default</Button>
+                <Button size="lg">Large</Button>
+                <Button size="icon">
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                  </svg>
+                </Button>
+              </div>
+            </ComponentCard>
+
+            <ComponentCard title="Button States">
+              <div className="flex flex-wrap gap-3">
+                <Button disabled>Disabled</Button>
+                <Button loading>Loading</Button>
+              </div>
+            </ComponentCard>
+          </Section>
+
+          {/* Form Inputs */}
+          <Section title="Form Inputs">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <ComponentCard title="Input">
+                <div className="space-y-4">
+                  <div>
+                    <Label htmlFor="email">Email</Label>
+                    <Input id="email" type="email" placeholder="you@example.com" className="mt-1.5" />
+                  </div>
+                  <div>
+                    <Label htmlFor="disabled">Disabled</Label>
+                    <Input id="disabled" disabled placeholder="Disabled input" className="mt-1.5" />
+                  </div>
+                </div>
+              </ComponentCard>
+
+              <ComponentCard title="Textarea">
+                <div>
+                  <Label htmlFor="message">Message</Label>
+                  <Textarea id="message" placeholder="Type your message..." className="mt-1.5" rows={3} />
+                </div>
+              </ComponentCard>
+
+              <ComponentCard title="Select">
+                <div>
+                  <Label>Choose an option</Label>
+                  <Select>
+                    <SelectTrigger className="mt-1.5">
+                      <SelectValue placeholder="Select..." />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="option1">Option 1</SelectItem>
+                      <SelectItem value="option2">Option 2</SelectItem>
+                      <SelectItem value="option3">Option 3</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </ComponentCard>
+
+              <ComponentCard title="Checkbox & Switch">
+                <div className="space-y-4">
+                  <div className="flex items-center gap-2">
+                    <Checkbox
+                      id="terms"
+                      checked={checkboxChecked}
+                      onCheckedChange={(checked) => setCheckboxChecked(checked as boolean)}
+                    />
+                    <Label htmlFor="terms">Accept terms and conditions</Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Switch
+                      id="notifications"
+                      checked={switchChecked}
+                      onCheckedChange={setSwitchChecked}
+                    />
+                    <Label htmlFor="notifications">Enable notifications</Label>
+                  </div>
+                </div>
+              </ComponentCard>
+
+              <ComponentCard title="Radio Group">
+                <RadioGroup defaultValue="option1">
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="option1" id="r1" />
+                    <Label htmlFor="r1">Option 1</Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="option2" id="r2" />
+                    <Label htmlFor="r2">Option 2</Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <RadioGroupItem value="option3" id="r3" />
+                    <Label htmlFor="r3">Option 3</Label>
+                  </div>
+                </RadioGroup>
+              </ComponentCard>
+
+              <ComponentCard title="Slider">
+                <div className="space-y-4">
+                  <Label>Volume: {sliderValue[0]}%</Label>
+                  <div className="border border-border rounded-lg p-4">
+                    <Slider
+                      value={sliderValue}
+                      onValueChange={setSliderValue}
+                      max={100}
+                      step={1}
+                    />
+                  </div>
+                </div>
+              </ComponentCard>
+            </div>
+          </Section>
+
+          {/* Data Display */}
+          <Section title="Data Display">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              <ComponentCard title="Badges">
+                <div className="flex flex-wrap gap-2">
+                  <Badge>Default</Badge>
+                  <Badge variant="secondary">Secondary</Badge>
+                  <Badge variant="outline">Outline</Badge>
+                  <Badge variant="destructive">Destructive</Badge>
+                </div>
+              </ComponentCard>
+
+              <ComponentCard title="Avatar">
+                <div className="flex items-center gap-3">
+                  <Avatar>
+                    <AvatarImage src="https://github.com/shadcn.png" alt="User" />
+                    <AvatarFallback>CN</AvatarFallback>
+                  </Avatar>
+                  <Avatar>
+                    <AvatarFallback>JD</AvatarFallback>
+                  </Avatar>
+                  <Avatar>
+                    <AvatarFallback className="bg-primary text-white">AB</AvatarFallback>
+                  </Avatar>
+                </div>
+              </ComponentCard>
+
+              <ComponentCard title="Progress">
+                <div className="space-y-4">
+                  <Progress value={progressValue} />
+                  <div className="flex gap-2">
+                    <Button size="sm" variant="outline" onClick={() => setProgressValue(Math.max(0, progressValue - 10))}>
+                      -10
+                    </Button>
+                    <Button size="sm" variant="outline" onClick={() => setProgressValue(Math.min(100, progressValue + 10))}>
+                      +10
+                    </Button>
+                  </div>
+                </div>
+              </ComponentCard>
+
+              <ComponentCard title="Skeleton">
+                <div className="space-y-3">
+                  <div className="flex items-center gap-3">
+                    <Skeleton className="w-10 h-10 rounded-full" />
+                    <div className="space-y-2">
+                      <Skeleton className="h-4 w-32" />
+                      <Skeleton className="h-3 w-24" />
+                    </div>
+                  </div>
+                </div>
+              </ComponentCard>
+
+              <ComponentCard title="Tooltip">
+                <div className="flex gap-3">
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button variant="outline">Hover me</Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>This is a tooltip</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </div>
+              </ComponentCard>
+
+              <ComponentCard title="Separator">
+                <div className="space-y-3">
+                  <p className="text-sm text-muted-foreground">Content above</p>
+                  <Separator />
+                  <p className="text-sm text-muted-foreground">Content below</p>
+                </div>
+              </ComponentCard>
+            </div>
+          </Section>
+
+          {/* Stat Cards */}
+          <Section title="Stat Cards">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+              <StatCard
+                title="Total Revenue"
+                value="$45,231.89"
+                trend="up"
+                trendValue="+20.1%"
+                subtitle="from last month"
+              />
+              <StatCard
+                title="Subscriptions"
+                value="+2,350"
+                trend="up"
+                trendValue="+180.1%"
+                subtitle="from last month"
+              />
+              <StatCard
+                title="Active Users"
+                value="+12,234"
+                trend="down"
+                trendValue="-5.2%"
+                subtitle="from last month"
+              />
+              <StatCard
+                title="Bounce Rate"
+                value="24.5%"
+                trend="neutral"
+                trendValue="+0.0%"
+                subtitle="no change"
+              />
+            </div>
+          </Section>
+
+          {/* Filter Bar */}
+          <Section title="Filter Bar">
+            <ComponentCard title="Filter Components" description="Select a tag to add it as a filter chip, click X to remove">
+              <FilterBar>
+                <FilterSelect
+                  value={selectedFilter}
+                  onValueChange={(value) => {
+                    if (value && !activeFilters.includes(value)) {
+                      setActiveFilters([...activeFilters, value])
+                    }
+                    setSelectedFilter('')
+                  }}
+                  placeholder="Add filter..."
+                  options={[
+                    { label: 'React', value: 'React' },
+                    { label: 'TypeScript', value: 'TypeScript' },
+                    { label: 'Tailwind', value: 'Tailwind' },
+                    { label: 'Node.js', value: 'Node.js' },
+                    { label: 'GraphQL', value: 'GraphQL' },
+                    { label: 'Prisma', value: 'Prisma' },
+                  ].filter(opt => !activeFilters.includes(opt.value))}
+                />
+                <div className="flex flex-wrap gap-2">
+                  {activeFilters.map((filter) => (
+                    <FilterChip
+                      key={filter}
+                      label={filter}
+                      onRemove={() => setActiveFilters(activeFilters.filter(f => f !== filter))}
+                    />
+                  ))}
+                  {activeFilters.length > 0 && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-7 text-xs text-muted-foreground hover:text-foreground"
+                      onClick={() => setActiveFilters([])}
+                    >
+                      Clear all
+                    </Button>
+                  )}
+                </div>
+              </FilterBar>
+            </ComponentCard>
+          </Section>
+
+          {/* Alerts */}
+          <Section title="Alerts & Feedback">
+            <div className="space-y-4">
+              <Alert>
+                <AlertTitle>Default Alert</AlertTitle>
+                <AlertDescription>This is a default alert with some information.</AlertDescription>
+              </Alert>
+              <Alert variant="destructive">
+                <AlertTitle>Error Alert</AlertTitle>
+                <AlertDescription>Something went wrong. Please try again.</AlertDescription>
+              </Alert>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
+              <ComponentCard title="Loading Spinner">
+                <div className="flex items-center gap-6">
+                  <LoadingSpinner size="sm" />
+                  <LoadingSpinner size="md" />
+                  <LoadingSpinner size="lg" />
+                </div>
+              </ComponentCard>
+
+              <ComponentCard title="Empty State">
+                <EmptyState
+                  icon={
+                    <svg className="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
+                    </svg>
+                  }
+                  title="No items found"
+                  description="Get started by creating your first item."
+                  action={<Button size="sm">Create Item</Button>}
+                />
+              </ComponentCard>
+            </div>
+          </Section>
+
+          {/* Tables */}
+          <Section title="Tables">
+            <ComponentCard title="Data Table">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Name</TableHead>
+                    <TableHead>Email</TableHead>
+                    <TableHead>Status</TableHead>
+                    <TableHead className="text-right">Amount</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  <TableRow>
+                    <TableCell className="font-medium">John Doe</TableCell>
+                    <TableCell>john@example.com</TableCell>
+                    <TableCell><Badge variant="outline">Active</Badge></TableCell>
+                    <TableCell className="text-right">$250.00</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell className="font-medium">Jane Smith</TableCell>
+                    <TableCell>jane@example.com</TableCell>
+                    <TableCell><Badge variant="secondary">Pending</Badge></TableCell>
+                    <TableCell className="text-right">$150.00</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell className="font-medium">Bob Johnson</TableCell>
+                    <TableCell>bob@example.com</TableCell>
+                    <TableCell><Badge variant="destructive">Inactive</Badge></TableCell>
+                    <TableCell className="text-right">$350.00</TableCell>
+                  </TableRow>
+                </TableBody>
+              </Table>
+            </ComponentCard>
+          </Section>
+
+          {/* Tabs */}
+          <Section title="Tabs">
+            <ComponentCard title="Tab Navigation">
+              <Tabs defaultValue="account">
+                <TabsList>
+                  <TabsTrigger value="account">Account</TabsTrigger>
+                  <TabsTrigger value="password">Password</TabsTrigger>
+                  <TabsTrigger value="settings">Settings</TabsTrigger>
+                </TabsList>
+                <TabsContent value="account" className="mt-4">
+                  <p className="text-muted-foreground">Manage your account settings and preferences.</p>
+                </TabsContent>
+                <TabsContent value="password" className="mt-4">
+                  <p className="text-muted-foreground">Change your password and security settings.</p>
+                </TabsContent>
+                <TabsContent value="settings" className="mt-4">
+                  <p className="text-muted-foreground">Configure your application settings.</p>
+                </TabsContent>
+              </Tabs>
+            </ComponentCard>
+          </Section>
+
+          {/* Collapsible */}
+          <Section title="Collapsible">
+            <ComponentCard title="Expandable Content">
+              <Collapsible open={isCollapsibleOpen} onOpenChange={setIsCollapsibleOpen}>
+                <div className="flex items-center justify-between">
+                  <h4 className="text-sm font-semibold">Click to expand</h4>
+                  <CollapsibleTrigger asChild>
+                    <Button variant="ghost" size="sm">
+                      {isCollapsibleOpen ? 'Collapse' : 'Expand'}
+                    </Button>
+                  </CollapsibleTrigger>
+                </div>
+                <CollapsibleContent className="mt-4">
+                  <div className="rounded-md border border-border px-4 py-3 text-sm text-muted-foreground">
+                    This content can be collapsed and expanded. Great for FAQs, settings panels, and more.
+                  </div>
+                </CollapsibleContent>
+              </Collapsible>
+            </ComponentCard>
+          </Section>
+
+          {/* Dialogs & Overlays */}
+          <Section title="Dialogs & Overlays">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              <ComponentCard title="Dialog">
+                <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+                  <DialogTrigger asChild>
+                    <Button variant="outline">Open Dialog</Button>
+                  </DialogTrigger>
+                  <DialogContent>
+                    <DialogHeader>
+                      <DialogTitle>Dialog Title</DialogTitle>
+                      <DialogDescription>
+                        This is a dialog component with header, content, and footer sections.
+                      </DialogDescription>
+                    </DialogHeader>
+                    <div className="py-4">
+                      <p className="text-muted-foreground">Dialog content goes here.</p>
+                    </div>
+                    <DialogFooter>
+                      <Button variant="outline" onClick={() => setDialogOpen(false)}>Cancel</Button>
+                      <Button onClick={() => { console.log('Confirmed!'); setDialogOpen(false); }}>Confirm</Button>
+                    </DialogFooter>
+                  </DialogContent>
+                </Dialog>
+              </ComponentCard>
+
+              <ComponentCard title="Alert Dialog">
+                <AlertDialog>
+                  <AlertDialogTrigger asChild>
+                    <Button variant="destructive">Delete Item</Button>
+                  </AlertDialogTrigger>
+                  <AlertDialogContent>
+                    <AlertDialogHeader>
+                      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+                      <AlertDialogDescription>
+                        This action cannot be undone. This will permanently delete the item.
+                      </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel>Cancel</AlertDialogCancel>
+                      <AlertDialogAction>Delete</AlertDialogAction>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialog>
+              </ComponentCard>
+
+              <ComponentCard title="Confirm Dialog">
+                <Button variant="outline" onClick={() => setConfirmOpen(true)}>
+                  Open Confirm
+                </Button>
+                <ConfirmDialog
+                  open={confirmOpen}
+                  onOpenChange={setConfirmOpen}
+                  title="Confirm Action"
+                  description="Are you sure you want to proceed with this action?"
+                  onConfirm={() => {
+                    console.log('Confirmed!')
+                    setConfirmOpen(false)
+                  }}
+                />
+              </ComponentCard>
+
+              <ComponentCard title="Sheet (Drawer)">
+                <Sheet>
+                  <SheetTrigger asChild>
+                    <Button variant="outline">Open Sheet</Button>
+                  </SheetTrigger>
+                  <SheetContent>
+                    <SheetHeader>
+                      <SheetTitle>Sheet Title</SheetTitle>
+                      <SheetDescription>
+                        This is a slide-out panel, great for mobile navigation or forms.
+                      </SheetDescription>
+                    </SheetHeader>
+                    <div className="py-4">
+                      <p className="text-muted-foreground">Sheet content goes here.</p>
+                    </div>
+                  </SheetContent>
+                </Sheet>
+              </ComponentCard>
+
+              <ComponentCard title="Popover">
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <Button variant="outline">Open Popover</Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-80">
+                    <div className="space-y-2">
+                      <h4 className="font-medium">Popover Title</h4>
+                      <p className="text-sm text-muted-foreground">
+                        This is a popover component for displaying additional content.
+                      </p>
+                    </div>
+                  </PopoverContent>
+                </Popover>
+              </ComponentCard>
+
+              <ComponentCard title="Dropdown Menu">
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="outline">Open Menu</Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent>
+                    <DropdownMenuItem>Profile</DropdownMenuItem>
+                    <DropdownMenuItem>Settings</DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem className="text-red-500">Logout</DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </ComponentCard>
+            </div>
+          </Section>
+
+          {/* Cards */}
+          <Section title="Cards">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              <Card>
+                <CardHeader>
+                  <CardTitle>Card Title</CardTitle>
+                  <CardDescription>Card description text goes here.</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-muted-foreground">This is the main content area of the card.</p>
+                </CardContent>
+                <CardFooter className="flex justify-between">
+                  <Button variant="outline">Cancel</Button>
+                  <Button>Save</Button>
+                </CardFooter>
+              </Card>
+
+              <Card className="border-primary/50">
+                <CardHeader>
+                  <Badge className="w-fit mb-2">Featured</Badge>
+                  <CardTitle>Highlighted Card</CardTitle>
+                  <CardDescription>A card with primary border accent.</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-muted-foreground">Use border colors to highlight important cards.</p>
+                </CardContent>
+              </Card>
+
+              <Card className={cardSwitchOn ? "border-accent/50 bg-accent/5" : ""}>
+                <CardHeader>
+                  <CardTitle>Interactive Card</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="card-switch">Enable feature</Label>
+                    <Switch
+                      id="card-switch"
+                      checked={cardSwitchOn}
+                      onCheckedChange={setCardSwitchOn}
+                    />
+                  </div>
+                  <Separator />
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-muted-foreground">Status</span>
+                    <Badge variant={cardSwitchOn ? "default" : "outline"}>
+                      {cardSwitchOn ? "Enabled" : "Disabled"}
+                    </Badge>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          </Section>
+
+        </div>
+      </div>
+    </TooltipProvider>
+  )
+}