Alert

import { Alert } from "@glinui/ui"


<Alert variant="glinr" tone="accent" icon />
<Alert variant="plain" tone="accent" icon />
<Alert variant="solid" tone="accent" icon />
<Alert variant="soft" tone="accent" icon />
<Alert variant="glass" tone="accent" icon />

import { useState } from "react"
import { ArrowClockwise } from "@phosphor-icons/react"
import { Alert, AlertDescription, AlertTitle, Button } from "@glinui/ui"


export function Demo() {
  const [open, setOpen] = useState(true)
  return (
    <div className="flex w-full max-w-xl flex-col gap-3">
      {open ? (
        <Alert tone="accent" icon>
          <AlertTitle>Invite your team</AlertTitle>
          <AlertDescription>Projects with two or more members ship twice as often.</AlertDescription>
          <div className="mt-3 flex flex-wrap gap-2">
            <Button size="sm">Invite teammates</Button>
            <Button size="sm" variant="ghost" onClick={() => setOpen(false)}>Dismiss</Button>
          </div>
        </Alert>
      ) : (
        <Button variant="outline" size="sm" className="w-fit" onClick={() => setOpen(true)}>
          <ArrowClockwise aria-hidden className="size-4" />
          Show banner again
        </Button>
      )}
      <Alert variant="note">
        <AlertTitle>Note</AlertTitle>
        <AlertDescription>Quiet aside for tips that do not need a tone.</AlertDescription>
      </Alert>
      <Alert variant="flag">
        <AlertTitle>Flag</AlertTitle>
        <AlertDescription>Brand-colored callout for launches and announcements.</AlertDescription>
      </Alert>
    </div>
  )
}

import {
  Alert,
  AlertDescription,
  AlertTitle,
  Badge,
  Button,
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle
} from "@glinui/ui"


export function Demo() {
  return (
    <section aria-label="Billing settings" className="flex w-full max-w-xl flex-col gap-4">
      <Alert tone="warning">
        <AlertTitle>Your card expires next month</AlertTitle>
        <AlertDescription>Update it before Nov 1 to avoid a failed renewal.</AlertDescription>
        <div className="mt-3">
          <Button size="sm" variant="outline">Update card</Button>
        </div>
      </Alert>
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between gap-3">
            <CardTitle>Team plan</CardTitle>
            <Badge tone="success" variant="soft" dot>Active</Badge>
          </div>
          <CardDescription>5 seats, billed monthly.</CardDescription>
        </CardHeader>
        <CardContent className="flex items-baseline gap-1">
          <span className="text-3xl font-semibold">$60</span>
          <span className="text-sm text-[var(--color-muted)]">per month</span>
        </CardContent>
      </Card>
    </section>
  )
}