Alert

import { Alert, AlertAction, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Button } from '@/components/ui/button';
import { Info } from 'lucide-react';
 
export function AlertDemo() {
  return (
    <div className='flex flex-col gap-6'>
      <div className='flex flex-col gap-2'>
        <Alert
          dismissible
          onDismiss={() => {
            console.log('Alert dismissed');
          }}
          icon={<Info />}
        >
          <AlertTitle>Information</AlertTitle>
          <AlertDescription>
            This is a default alert. You can add any content here.
          </AlertDescription>
          <AlertAction>
            <Button size='sm'>Learn more</Button>
          </AlertAction>
        </Alert>
      </div>
    </div>
  );
}

import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { AlertTriangle, CheckCircle, Info, TriangleAlert } from 'lucide-react';
 
export function AlertVariantsDemo() {
  return (
    <div className='grid gap-4'>
      <Alert>
        <Info className='size-4' />
        <AlertTitle>Default Alert</AlertTitle>
        <AlertDescription>
          This is the default alert variant. It's perfect for general information and neutral
          messages.
        </AlertDescription>
      </Alert>
 
      <Alert variant='success'>
        <CheckCircle className='size-4' />
        <AlertTitle>Success Alert</AlertTitle>
        <AlertDescription>
          Use this variant to indicate successful operations, confirmations, or positive outcomes.
        </AlertDescription>
      </Alert>
 
      <Alert variant='warning'>
        <TriangleAlert className='size-4' />
        <AlertTitle>Warning Alert</AlertTitle>
        <AlertDescription>
          This variant draws attention to potential issues or important information that requires
          user attention.
        </AlertDescription>
      </Alert>
 
      <Alert variant='destructive'>
        <AlertTriangle className='size-4' />
        <AlertTitle>Destructive Alert</AlertTitle>
        <AlertDescription>
          Use this for errors, failures, or critical issues that need immediate attention from the
          user.
        </AlertDescription>
      </Alert>
    </div>
  );
}

import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { CheckCircle, Info, TriangleAlert } from 'lucide-react';
import { useState } from 'react';
 
export function AlertDismissibleDemo() {
  const [alerts, setAlerts] = useState({
    info: true,
    success: true,
    warning: true,
    error: true,
  });
 
  const dismissAlert = (type: keyof typeof alerts) => {
    setAlerts((prev) => ({ ...prev, [type]: false }));
  };
 
  return (
    <div className='flex flex-col gap-4'>
      {alerts.info && (
        <Alert dismissible onDismiss={() => dismissAlert('info')}>
          <Info className='size-4' />
          <AlertTitle>Information</AlertTitle>
          <AlertDescription>
            This alert can be dismissed. Click the × button to remove it.
          </AlertDescription>
        </Alert>
      )}
 
      {alerts.success && (
        <Alert variant='success' dismissible onDismiss={() => dismissAlert('success')}>
          <CheckCircle className='size-4' />
          <AlertTitle>Success</AlertTitle>
          <AlertDescription>
            Operation completed successfully! This alert can be dismissed.
          </AlertDescription>
        </Alert>
      )}
 
      {alerts.warning && (
        <Alert variant='warning' dismissible onDismiss={() => dismissAlert('warning')}>
          <TriangleAlert className='size-4' />
          <AlertTitle>Warning</AlertTitle>
          <AlertDescription>
            Please review your settings. This warning can be dismissed.
          </AlertDescription>
        </Alert>
      )}
 
      {alerts.error && (
        <Alert variant='destructive' dismissible onDismiss={() => dismissAlert('error')}>
          <TriangleAlert className='size-4' />
          <AlertTitle>Error</AlertTitle>
          <AlertDescription>
            Something went wrong. This error alert can be dismissed.
          </AlertDescription>
        </Alert>
      )}
    </div>
  );
}

import { Alert, AlertAction, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Button } from '@/components/ui/button';
import { TriangleAlert } from 'lucide-react';
 
export function AlertWithActionsDemo() {
  return (
    <div className='flex flex-col gap-6'>
      <div className='flex flex-col gap-2'>
        <span className='text-muted-foreground text-sm'>Warning with Multiple Actions</span>
        <Alert variant='warning'>
          <TriangleAlert className='size-4' />
          <AlertTitle>Storage Almost Full</AlertTitle>
          <AlertDescription>
            Your storage is 90% full. Consider upgrading your plan or cleaning up files.
          </AlertDescription>
          <AlertAction>
            <div className='flex gap-2'>
              <Button size='sm' variant='warning'>
                Upgrade Plan
              </Button>
              <Button size='sm' variant='outline'>
                Clean Up
              </Button>
            </div>
          </AlertAction>
        </Alert>
      </div>
 
      <div className='flex flex-col gap-2'>
        <span className='text-muted-foreground text-sm'>Error with Dismissible Action</span>
        <Alert variant='destructive' dismissible>
          <TriangleAlert className='size-4' />
          <AlertTitle>Connection Failed</AlertTitle>
          <AlertDescription>
            Unable to connect to the server. Please check your internet connection.
          </AlertDescription>
          <AlertAction>
            <Button size='sm' variant='destructive'>
              Retry Connection
            </Button>
          </AlertAction>
        </Alert>
      </div>
    </div>
  );
}