Alert Dialog

"use client"


import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
  Button,
  Input,
  Label
} from "@glinui/ui"


const CARD = "mx-auto w-full rounded-2xl border border-[var(--line-soft)] bg-[var(--surface-1)] p-5 [box-shadow:var(--elev-1)]"


export function AlertDiscardExample() {
  return (
    <div className={`${CARD} max-w-md`}>
      <Label htmlFor="draft-title">Post title</Label>
      <Input id="draft-title" className="mt-2" defaultValue="Launch notes for v2.4" />
      <div className="mt-4 flex justify-end gap-2">
        <AlertDialog>
          <AlertDialogTrigger asChild><Button variant="ghost">Discard draft</Button></AlertDialogTrigger>
          <AlertDialogContent size="sm">
            <AlertDialogHeader>
              <AlertDialogTitle>Discard this draft?</AlertDialogTitle>
              <AlertDialogDescription>Your unsaved edits will be lost.</AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>Keep editing</AlertDialogCancel>
              <AlertDialogAction>Discard</AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
        <Button>Publish</Button>
      </div>
    </div>
  )
}

import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Button } from "@glinui/ui"


const variants = ["glinr", "plain", "solid", "soft", "outline", "ghost", "gradient", "glass"] as const


export function Demo() {
  return (
    <div className="flex flex-wrap gap-2">
      {variants.map((variant) => (
        <AlertDialog key={variant}>
          <AlertDialogTrigger asChild><Button size="sm" variant="outline">{variant}</Button></AlertDialogTrigger>
          <AlertDialogContent variant={variant} size="sm">
            <AlertDialogHeader>
              <AlertDialogTitle>{variant} alert</AlertDialogTitle>
              <AlertDialogDescription>Confirm to continue.</AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>Cancel</AlertDialogCancel>
              <AlertDialogAction>Confirm</AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      ))}
    </div>
  )
}

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
  Button
} from "@glinui/ui"


export function Demo() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="outline">Archive workspace</Button>
      </AlertDialogTrigger>
      <AlertDialogContent variant="glass" size="sm">
        <AlertDialogHeader>
          <AlertDialogTitle>Archive workspace?</AlertDialogTitle>
          <AlertDialogDescription>
            Members will lose write access until you restore the workspace.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Not now</AlertDialogCancel>
          <AlertDialogAction variant="glass">Archive</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}