Alert

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