Example

1"use client"
2 
3import * as React from "react"
4 
5import {
6  Example,
7  ExampleWrapper,
8} from "@/registry/radix-sera/components/example"
9import {
10  AlertDialog,
11  AlertDialogAction,
12  AlertDialogCancel,
13  AlertDialogContent,
14  AlertDialogDescription,
15  AlertDialogFooter,
16  AlertDialogHeader,
17  AlertDialogMedia,
18  AlertDialogTitle,
19  AlertDialogTrigger,
20} from "@/registry/radix-sera/ui/alert-dialog"
21import { Badge } from "@/registry/radix-sera/ui/badge"
22import { Button } from "@/registry/radix-sera/ui/button"
23import {
24  Card,
25  CardAction,
26  CardContent,
27  CardDescription,
28  CardFooter,
29  CardHeader,
30  CardTitle,
31} from "@/registry/radix-sera/ui/card"
32import {
33  Combobox,
34  ComboboxContent,
35  ComboboxEmpty,
36  ComboboxInput,
37  ComboboxItem,
38  ComboboxList,
39} from "@/registry/radix-sera/ui/combobox"
40import {
41  DropdownMenu,
42  DropdownMenuCheckboxItem,
43  DropdownMenuContent,
44  DropdownMenuGroup,
45  DropdownMenuItem,
46  DropdownMenuLabel,
47  DropdownMenuPortal,
48  DropdownMenuRadioGroup,
49  DropdownMenuRadioItem,
50  DropdownMenuSeparator,
51  DropdownMenuShortcut,
52  DropdownMenuSub,
53  DropdownMenuSubContent,
54  DropdownMenuSubTrigger,
55  DropdownMenuTrigger,
56} from "@/registry/radix-sera/ui/dropdown-menu"
57import { Field, FieldGroup, FieldLabel } from "@/registry/radix-sera/ui/field"
58import { Input } from "@/registry/radix-sera/ui/input"
59import {
60  Select,
61  SelectContent,
62  SelectGroup,
63  SelectItem,
64  SelectTrigger,
65  SelectValue,
66} from "@/registry/radix-sera/ui/select"
67import { Textarea } from "@/registry/radix-sera/ui/textarea"
68import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
69 
70export function ComponentExample() {
71  return (
72    <ExampleWrapper>
73      <CardExample />
74      <FormExample />
75    </ExampleWrapper>
76  )
77}
78 
79function CardExample() {
80  return (
81    <Example title="Card" className="items-center justify-center">
82      <Card className="relative w-full max-w-sm overflow-hidden pt-0">
83        <div className="absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color" />
84        <img
85          src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
86          alt="Photo by mymind on Unsplash"
87          title="Photo by mymind on Unsplash"
88          className="relative z-20 aspect-video w-full object-cover brightness-60 grayscale"
89        />
90        <CardHeader>
91// … truncated