Alert

1import { Alert, AlertTitle, AlertDescription } from "@glinui/ui"
2import { Bell } from "lucide-react"
3
4export function AlertBasicDemo() {
5return (
6  <Alert>
7    <Bell className="size-4" />
8    <AlertTitle>Changes saved</AlertTitle>
9    <AlertDescription>Your workspace configuration has been updated.</AlertDescription>
10  </Alert>
11)
12}

1import { Alert, AlertTitle, AlertDescription } from "@glinui/ui"
2import { CheckCircle2, AlertTriangle, AlertCircle, Info } from "lucide-react"
3
4export function AlertVariantDemo() {
5return (
6  <div className="space-y-3">
7    <Alert variant="success">
8      <CheckCircle2 className="size-4" />
9      <AlertTitle>Deployment complete</AlertTitle>
10      <AlertDescription>All regions are now serving the latest release.</AlertDescription>
11    </Alert>
12    <Alert variant="warning">
13      <AlertTriangle className="size-4" />
14      <AlertTitle>Usage threshold reached</AlertTitle>
15      <AlertDescription>You are at 92% of your monthly event quota.</AlertDescription>
16    </Alert>
17    <Alert variant="destructive">
18      <AlertCircle className="size-4" />
19      <AlertTitle>Payment failed</AlertTitle>
20      <AlertDescription>Update your billing method to avoid service interruption.</AlertDescription>
21    </Alert>
22    <Alert variant="info">
23      <Info className="size-4" />
24      <AlertTitle>Scheduled maintenance</AlertTitle>
25      <AlertDescription>Infrastructure updates start at 02:00 UTC.</AlertDescription>
26    </Alert>
27  </div>
28)
29}

1import { Alert, AlertTitle, AlertDescription } from "@glinui/ui"
2import { Bell } from "lucide-react"
3
4export function AlertSurfaceDemo() {
5return (
6  <div className="space-y-3">
7    <Alert variant="default">
8      <Bell className="size-4" />
9      <AlertTitle>Default Surface</AlertTitle>
10      <AlertDescription>Balanced contrast for standard inline system messaging.</AlertDescription>
11    </Alert>
12    <Alert variant="glass">
13      <Bell className="size-4" />
14      <AlertTitle>Glass Surface</AlertTitle>
15      <AlertDescription>Frosted treatment for elevated cards and overlays.</AlertDescription>
16    </Alert>
17    <Alert variant="matte">
18      <Bell className="size-4" />
19      <AlertTitle>Matte Surface</AlertTitle>
20      <AlertDescription>Dense, low-glare treatment for high-density dashboards.</AlertDescription>
21    </Alert>
22    <Alert variant="outline">
23      <Bell className="size-4" />
24      <AlertTitle>Outline Surface</AlertTitle>
25      <AlertDescription>Low-emphasis bordered message without strong fill.</AlertDescription>
26    </Alert>
27  </div>
28)
29}

1import { Alert, AlertTitle, AlertDescription } from "@glinui/ui"
2
3export function AlertSizeDemo() {
4return (
5  <div className="space-y-3">
6    <Alert size="sm"><AlertTitle>Small</AlertTitle><AlertDescription>Compact alert.</AlertDescription></Alert>
7    <Alert size="md"><AlertTitle>Medium</AlertTitle><AlertDescription>Standard alert.</AlertDescription></Alert>
8    <Alert size="lg"><AlertTitle>Large</AlertTitle><AlertDescription>Expanded alert.</AlertDescription></Alert>
9  </div>
10)
11}