Demo

1"use client"
2 
3import * as React from "react"
4 
5import {
6  AlertDialog,
7  AlertDialogAction,
8  AlertDialogCancel,
9  AlertDialogContent,
10  AlertDialogDescription,
11  AlertDialogFooter,
12  AlertDialogHeader,
13  AlertDialogTitle,
14  AlertDialogTrigger,
15} from "@/registry/radix-sera/ui/alert-dialog"
16import { Badge } from "@/registry/radix-sera/ui/badge"
17import { Button } from "@/registry/radix-sera/ui/button"
18import { ButtonGroup } from "@/registry/radix-sera/ui/button-group"
19import {
20  Card,
21  CardContent,
22  CardDescription,
23  CardHeader,
24  CardTitle,
25} from "@/registry/radix-sera/ui/card"
26import { Checkbox } from "@/registry/radix-sera/ui/checkbox"
27import {
28  DropdownMenu,
29  DropdownMenuContent,
30  DropdownMenuGroup,
31  DropdownMenuItem,
32  DropdownMenuLabel,
33  DropdownMenuSeparator,
34  DropdownMenuTrigger,
35} from "@/registry/radix-sera/ui/dropdown-menu"
36import { Field, FieldGroup } from "@/registry/radix-sera/ui/field"
37import {
38  InputGroup,
39  InputGroupAddon,
40  InputGroupInput,
41  InputGroupText,
42} from "@/registry/radix-sera/ui/input-group"
43import {
44  Item,
45  ItemActions,
46  ItemContent,
47  ItemDescription,
48  ItemTitle,
49} from "@/registry/radix-sera/ui/item"
50import {
51  RadioGroup,
52  RadioGroupItem,
53} from "@/registry/radix-sera/ui/radio-group"
54import { Slider } from "@/registry/radix-sera/ui/slider"
55import { Switch } from "@/registry/radix-sera/ui/switch"
56import { Textarea } from "@/registry/radix-sera/ui/textarea"
57import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
58 
59export function Demo() {
60  const [sliderValue, setSliderValue] = React.useState<number[]>([500])
61  const handleSliderValueChange = React.useCallback((value: number[]) => {
62    setSliderValue(value)
63  }, [])
64 
65  return (
66    <div className="flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background">
67      <div className="grid max-w-3xl gap-4 sm:grid-cols-2">
68        <div className="flex flex-col gap-4">
69          <Card>
70            <CardHeader>
71              <CardTitle>Style Overview</CardTitle>
72              <CardDescription className="line-clamp-2">
73                Designers love packing quirky glyphs into test phrases. This is
74                a preview of the typography styles.
75              </CardDescription>
76            </CardHeader>
77            <CardContent>
78              <div className="grid grid-cols-6 gap-3">
79                {[
80                  "--background",
81                  "--foreground",
82// … truncated