Alert

import { Alert, AlertIcon, AlertTitle } from '@/components/ui/alert-1';
import { RiAlertFill } from '@remixicon/react';

export default function Component() {
  return (
     <div className="flex flex-col gap-5 p-10 w-full mx-auto max-w-[600px] h-screen justify-center items-center">
      <Alert variant="primary" appearance="outline" size="sm" close={true}>
        <AlertIcon>
          <RiAlertFill />
        </AlertIcon>
        <AlertTitle>This is a small size alert</AlertTitle>
      </Alert>
      <Alert variant="primary" appearance="outline" close={true}>
        <AlertIcon>
          <RiAlertFill />
        </AlertIcon>
        <AlertTitle>This is a medium size alert</AlertTitle>
      </Alert>
      <Alert variant="primary" appearance="outline" size="lg" close={true}>
        <AlertIcon>
          <RiAlertFill />
        </AlertIcon>
        <AlertTitle>This is a large size alert</AlertTitle>
      </Alert>
    </div>
  );
}