Alert

import { InfoIcon } from "lucide-react"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

export function AlertDemo() {
  return (
    <Alert>
      <InfoIcon />
      <AlertTitle>Sync runs every hour</AlertTitle>
      <AlertDescription>
        Products, orders and customers update automatically. You can also sync
        now from the store settings.
      </AlertDescription>
    </Alert>
  )
}

import { PlugIcon } from "lucide-react"

import { Alert, AlertTitle } from "@/components/ui/alert"

export function AlertTitleOnly() {
  return (
    <Alert>
      <PlugIcon />
      <AlertTitle>Shopify is connected</AlertTitle>
    </Alert>
  )
}

import { CircleAlertIcon } from "lucide-react"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

export function AlertDestructive() {
  return (
    <Alert variant="destructive">
      <CircleAlertIcon />
      <AlertTitle>Sync failed</AlertTitle>
      <AlertDescription>
        We couldn&apos;t reach your store. Check that the app still has access,
        then <a href="#alert">try again</a>.
      </AlertDescription>
    </Alert>
  )
}

import { InfoIcon, XIcon } from "lucide-react"

import {
  Alert,
  AlertAction,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert"
import { Button } from "@/components/ui/button"

export function AlertWithAction() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Alert>
        <InfoIcon />
        <AlertTitle>A new version is available</AlertTitle>
        <AlertDescription>Reload to get the latest changes.</AlertDescription>
        <AlertAction>
          <Button size="sm" variant="secondary">
            Reload
          </Button>
        </AlertAction>
      </Alert>
      <Alert>
        <AlertTitle>Your trial ends in 14 days</AlertTitle>
        <AlertAction>
          <Button size="icon-sm" variant="ghost" aria-label="Dismiss">
            <XIcon />
          </Button>
        </AlertAction>
      </Alert>
    </div>
  )
}

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

export function AlertWithoutIcon() {
  return (
    <Alert>
      <AlertTitle>Heads up</AlertTitle>
      <AlertDescription>
        Changes to permissions take effect the next time the app syncs.
      </AlertDescription>
    </Alert>
  )
}