Alert

import { LuTerminal } from "react-icons/lu";
import {
  Alert,
  AlertContent,
  AlertDescription,
  AlertIcon,
  AlertTitle,
} from "@/components/ui/alert";

export default function AlertDemo() {
  return (
    <Alert css={{ w: "2/3" }}>
      <AlertIcon>
        <LuTerminal />
      </AlertIcon>
      <AlertContent>
        <AlertTitle>Heads up!</AlertTitle>
        <AlertDescription>Hey there! This is a simple alert.</AlertDescription>
      </AlertContent>
    </Alert>
  );
}

import { LuCircleCheckBig, LuCircleX, LuInfo, LuTriangleAlert } from "react-icons/lu";
import { styled } from "styled-system/jsx";
import {
  Alert,
  AlertContent,
  AlertDescription,
  AlertIcon,
  AlertTitle,
} from "@/components/ui/alert";

export default function AlertVariant() {
  return (
    <styled.div css={{ w: "2/3", spaceY: "4" }}>
      {/* Info variant */}
      <Alert variant="info">
        <AlertIcon>
          <LuInfo />
        </AlertIcon>
        <AlertContent>
          <AlertTitle>Info</AlertTitle>
          <AlertDescription>This is an info message.</AlertDescription>
        </AlertContent>
      </Alert>

      {/* Success variant */}
      <Alert variant="success">
        <AlertIcon>
          <LuCircleCheckBig />
        </AlertIcon>
        <AlertContent>
          <AlertTitle>Success!</AlertTitle>
          <AlertDescription>Your changes have been saved successfully.</AlertDescription>
        </AlertContent>
      </Alert>

      {/* Warning variant */}
      <Alert variant="warning">
        <AlertIcon>
          <LuTriangleAlert />
        </AlertIcon>
        <AlertContent>
          <AlertTitle>Warning</AlertTitle>
          <AlertDescription>Your subscription will expire in 7 days.</AlertDescription>
        </AlertContent>
      </Alert>

      {/* Danger variant */}
      <Alert variant="danger">
        <AlertIcon>
          <LuCircleX />
        </AlertIcon>
        <AlertContent>
          <AlertTitle>Error</AlertTitle>
          <AlertDescription>Failed to save changes. Please try again.</AlertDescription>
        </AlertContent>
      </Alert>
    </styled.div>
  );
}

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

export default function AlertWithoutIcon() {
  return (
    <Alert variant="info" css={{ w: "2/3" }}>
      <AlertContent>
        <AlertTitle>Info only</AlertTitle>
        <AlertDescription>This alert doesn&apos;t have an icon.</AlertDescription>
      </AlertContent>
    </Alert>
  );
}

import { LuCircleCheckBig } from "react-icons/lu";
import { Alert, AlertContent, AlertDescription, AlertIcon } from "@/components/ui/alert";

export default function AlertWithoutTitle() {
  return (
    <Alert variant="success" css={{ w: "2/3" }}>
      <AlertIcon>
        <LuCircleCheckBig />
      </AlertIcon>
      <AlertContent>
        <AlertDescription>This alert doesn&apos;t have a title.</AlertDescription>
      </AlertContent>
    </Alert>
  );
}

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

export default function AlertOnlyDescription() {
  return (
    <Alert variant="warning" css={{ w: "2/3" }}>
      <AlertDescription>This is a minimal alert with just description.</AlertDescription>
    </Alert>
  );
}

import { LuCircleX } from "react-icons/lu";
import {
  Alert,
  AlertContent,
  AlertDescription,
  AlertIcon,
  AlertTitle,
} from "@/components/ui/alert";

export default function AlertCustom() {
  return (
    <Alert
      css={{
        w: "2/3",
        borderStartWidth: "4px",
        borderStartColor: { base: "border.600", _dark: "red.500" },
      }}
    >
      <AlertIcon>
        <LuCircleX />
      </AlertIcon>
      <AlertContent>
        <AlertTitle css={{ textStyle: "lg" }}>Custom Styled Alert</AlertTitle>
        <AlertDescription>With custom border styling.</AlertDescription>
      </AlertContent>
    </Alert>
  );
}