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/base-vega/ui/alert-dialog"
16import { Badge } from "@/registry/base-vega/ui/badge"
17import { Button } from "@/registry/base-vega/ui/button"
18import { ButtonGroup } from "@/registry/base-vega/ui/button-group"
19import {
20  Card,
21  CardContent,
22  CardDescription,
23  CardHeader,
24  CardTitle,
25} from "@/registry/base-vega/ui/card"
26import { Checkbox } from "@/registry/base-vega/ui/checkbox"
27import {
28  DropdownMenu,
29  DropdownMenuContent,
30  DropdownMenuGroup,
31  DropdownMenuItem,
32  DropdownMenuLabel,
33  DropdownMenuSeparator,
34  DropdownMenuTrigger,
35} from "@/registry/base-vega/ui/dropdown-menu"
36import { Field, FieldGroup } from "@/registry/base-vega/ui/field"
37import {
38  InputGroup,
39  InputGroupAddon,
40  InputGroupInput,
41  InputGroupText,
42} from "@/registry/base-vega/ui/input-group"
43import {
44  Item,
45  ItemActions,
46  ItemContent,
47  ItemDescription,
48  ItemTitle,
49} from "@/registry/base-vega/ui/item"
50import { RadioGroup, RadioGroupItem } from "@/registry/base-vega/ui/radio-group"
51import { Slider } from "@/registry/base-vega/ui/slider"
52import { Switch } from "@/registry/base-vega/ui/switch"
53import { Textarea } from "@/registry/base-vega/ui/textarea"
54import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
55 
56export function Demo() {
57  const [sliderValue, setSliderValue] = React.useState<number[]>([500])
58  const handleSliderValueChange = React.useCallback(
59    (value: number | readonly number[]) => {
60      if (typeof value === "number") {
61        setSliderValue([value])
62      } else {
63        setSliderValue([...value])
64      }
65    },
66    []
67  )
68 
69  return (
70    <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">
71      <div className="grid max-w-3xl gap-4 sm:grid-cols-2">
72        <div className="flex flex-col gap-4">
73          <Card>
74            <CardHeader>
75              <CardTitle>Style Overview</CardTitle>
76              <CardDescription className="line-clamp-2">
77                Designers love packing quirky glyphs into test phrases. This is
78                a preview of the typography styles.
79              </CardDescription>
80            </CardHeader>
81            <CardContent>
82              <div className="grid grid-cols-6 gap-3">
83// … truncated