Alert

'use client';

import { Alert, AlertAction, AlertDescription, AlertTitle } from '@/registry/san-francisco/ui/alert';
import { Button } from '@/registry/san-francisco/ui/button';

export default function AlertDemo() {
  return (
    <Alert className="max-w-sm">
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>You can add components to your app using the CLI.</AlertDescription>
    </Alert>
  );
}

'use client';

import { Alert, AlertAction, AlertDescription, AlertTitle } from '@/registry/san-francisco/ui/alert';
import { Button } from '@/registry/san-francisco/ui/button';

export default function AlertDemoVariants() {
  return (
    <>
      <Alert variant="default" className="max-w-sm">
        <AlertTitle>Default</AlertTitle>
        <AlertDescription>This is a default alert.</AlertDescription>
      </Alert>
      <Alert variant="destructive" className="max-w-sm">
        <AlertTitle>Error</AlertTitle>
        <AlertDescription>Something went wrong.</AlertDescription>
      </Alert>
    </>
  );
}

'use client';

import { Alert, AlertAction, AlertDescription, AlertTitle } from '@/registry/san-francisco/ui/alert';
import { Button } from '@/registry/san-francisco/ui/button';

export default function AlertDemoWithAction() {
  return (
    <Alert className="max-w-sm">
      <AlertTitle>Update available</AlertTitle>
      <AlertDescription>A new version is ready to install.</AlertDescription>
      <AlertAction>
        <Button variant="outline" size="sm">
          Update
        </Button>
      </AlertAction>
    </Alert>
  );
}