Alert

1import {
2  Example,
3  ExampleWrapper,
4} from "@/registry/radix-sera/components/example"
5import {
6  Alert,
7  AlertAction,
8  AlertDescription,
9  AlertTitle,
10} from "@/registry/radix-sera/ui/alert"
11import { Badge } from "@/registry/radix-sera/ui/badge"
12import { Button } from "@/registry/radix-sera/ui/button"
13import {
14  Card,
15  CardContent,
16  CardDescription,
17  CardFooter,
18  CardHeader,
19  CardTitle,
20} from "@/registry/radix-sera/ui/card"
21import { Field, FieldGroup, FieldLabel } from "@/registry/radix-sera/ui/field"
22import { Input } from "@/registry/radix-sera/ui/input"
23import {
24  Item,
25  ItemContent,
26  ItemDescription,
27  ItemMedia,
28  ItemTitle,
29} from "@/registry/radix-sera/ui/item"
30import {
31  Select,
32  SelectContent,
33  SelectGroup,
34  SelectItem,
35  SelectTrigger,
36  SelectValue,
37} from "@/registry/radix-sera/ui/select"
38import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
39 
40export default function AlertExample() {
41  return (
42    <ExampleWrapper className="lg:grid-cols-1">
43      <AlertExample1 />
44      <AlertExample2 />
45      <AlertExample3 />
46      <AlertExample4 />
47      <AlertExample5 />
48    </ExampleWrapper>
49  )
50}
51 
52function AlertExample1() {
53  return (
54    <Example title="Basic" className="style-sera:bg-transparent">
55      <div className="mx-auto flex w-full max-w-lg flex-col gap-4">
56        <Alert>
57          <AlertTitle>Success! Your changes have been saved.</AlertTitle>
58        </Alert>
59        <Alert>
60          <AlertTitle>Success! Your changes have been saved.</AlertTitle>
61          <AlertDescription>
62            This is an alert with title and description.
63          </AlertDescription>
64        </Alert>
65        <Alert>
66          <AlertDescription>
67            This one has a description only. No title. No icon.
68          </AlertDescription>
69        </Alert>
70      </div>
71    </Example>
72  )
73}
74 
75function AlertExample2() {
76  return (
77    <Example title="With Icons" className="style-sera:bg-transparent">
78      <div className="mx-auto flex w-full max-w-lg flex-col gap-4">
79        <Alert>
80          <IconPlaceholder
81            lucide="CircleAlertIcon"
82            tabler="IconExclamationCircle"
83            hugeicons="AlertCircleIcon"
84            phosphor="WarningCircleIcon"
85            remixicon="RiErrorWarningLine"
86          />
87          <AlertTitle>
88            Let&apos;s try one with icon, title and a <a href="#">link</a>.
89          </AlertTitle>
90        </Alert>
91        <Alert>
92          <IconPlaceholder
93// … truncated