Alert

import {
  Alert,
  AlertDescription,
  AlertIcon,
  AlertTitle,
} from "@mijn-ui/react-alert"
import { IoRocketOutline } from "react-icons/io5"
 
const AlertExample = () => {
  return (
    <Alert className="w-full max-w-lg">
      <AlertIcon>
        <IoRocketOutline />
      </AlertIcon>
      <AlertTitle>New Feature Added</AlertTitle>
      <AlertDescription>
        A new feature has been added to the project.
      </AlertDescription>
    </Alert>
  )
}
 
export default AlertExample

import {
  Alert,
  AlertDescription,
  AlertIcon,
  AlertTitle,
} from "@mijn-ui/react-alert"
import { IoRocketOutline } from "react-icons/io5"
import { LuCheckCircle, LuFileWarning } from "react-icons/lu"
import { MdErrorOutline } from "react-icons/md"
 
const AlertColors = () => {
  return (
    <div className="flex flex-col gap-4">
      {/* --------------------------------- Success -------------------------------- */}
      <Alert className="w-full max-w-lg" color="success">
        <AlertIcon>
          <LuCheckCircle />
        </AlertIcon>
        <AlertTitle>Deployment Successful</AlertTitle>
        <AlertDescription>
          Your application has been successfully deployed.
        </AlertDescription>
      </Alert>
 
      {/* --------------------------------- Info -------------------------------- */}
      <Alert className="w-full max-w-lg" color="info">
        <AlertIcon>
          <IoRocketOutline />
        </AlertIcon>
        <AlertTitle>New Feature Added</AlertTitle>
        <AlertDescription>
          A new feature has been added to the project.
        </AlertDescription>
      </Alert>
 
      {/* --------------------------------- Warning -------------------------------- */}
      <Alert className="w-full max-w-lg" color="warning">
        <AlertIcon>
          <LuFileWarning />
        </AlertIcon>
        <AlertTitle>High Memory Usage</AlertTitle>
        <AlertDescription>
          The application is using a high amount of memory.
        </AlertDescription>
      </Alert>
 
      {/* --------------------------------- Danger -------------------------------- */}
      <Alert className="w-full max-w-lg" color="danger">
        <AlertIcon>
          <MdErrorOutline />
        </AlertIcon>
        <AlertTitle>Build Failed</AlertTitle>
        <AlertDescription>
          The latest build has failed. Please check the logs for details.
        </AlertDescription>
      </Alert>
 
      {/* ----------------------------- Muted/Default ---------------------------- */}
      <Alert className="w-full max-w-lg" color="default">
        <AlertIcon>
          <MdErrorOutline />
        </AlertIcon>
        <AlertTitle>New Feature Added</AlertTitle>
        <AlertDescription>
          A new feature has been added to the project.
        </AlertDescription>
      </Alert>
    </div>
  )
}
 
export default AlertColors

import {
  Alert,
  AlertDescription,
  AlertIcon,
  AlertTitle,
} from "@mijn-ui/react-alert"
import { MdErrorOutline } from "react-icons/md"
 
const AlertFilled = () => {
  return (
    <div className="flex w-full flex-wrap items-center justify-center gap-4">
      {/* ----------------------------- Default ---------------------------- */}
      <Alert className="w-full max-w-lg" color="default" variant={"filled"}>
        <AlertIcon>
          {" "}
          <MdErrorOutline />
        </AlertIcon>
        <AlertTitle>Default</AlertTitle>
        <AlertDescription>This is a filled Default Alert.</AlertDescription>
      </Alert>
 
      {/* ----------------------------- Success ---------------------------- */}
      <Alert className="w-full max-w-lg" color={"success"} variant={"filled"}>
        <AlertIcon>
          {" "}
          <MdErrorOutline />
        </AlertIcon>
        <AlertTitle>Success</AlertTitle>
        <AlertDescription>This is a filled Success Alert.</AlertDescription>
      </Alert>
 
      {/* ----------------------------- Warning ---------------------------- */}
      <Alert className="w-full max-w-lg" color={"warning"} variant={"filled"}>
        <AlertIcon>
          {" "}
          <MdErrorOutline />
        </AlertIcon>
        <AlertTitle>Warning</AlertTitle>
        <AlertDescription>This is a filled Warning Alert.</AlertDescription>
      </Alert>
 
      {/* ----------------------------- Danger ---------------------------- */}
      <Alert className="w-full max-w-lg" color={"danger"} variant={"filled"}>
        <AlertIcon>
          {" "}
          <MdErrorOutline />
        </AlertIcon>
        <AlertTitle>Danger</AlertTitle>
        <AlertDescription>This is a filled Danger Alert.</AlertDescription>
      </Alert>
 
      {/* ------------------------------ Info ----------------------------- */}
      <Alert className="w-full max-w-lg" color={"info"} variant={"filled"}>
        <AlertIcon>
          {" "}
          <MdErrorOutline />
        </AlertIcon>
        <AlertTitle>Info</AlertTitle>
        <AlertDescription>This is a filled Info Alert.</AlertDescription>
      </Alert>
    </div>
  )
}
 
export default AlertFilled

import {
  Alert,
  AlertDescription,
  AlertIcon,
  AlertTitle,
} from "@mijn-ui/react-alert"
import { MdErrorOutline } from "react-icons/md"
 
const AlertOutline = () => {
  return (
    <div className="flex w-full flex-wrap items-center justify-center gap-4">
      {/* ----------------------------- Default ---------------------------- */}
      <Alert className="w-full max-w-lg" color="default" variant={"outlined"}>
        <AlertIcon>
          {" "}
          <MdErrorOutline />
        </AlertIcon>
        <AlertTitle>Default</AlertTitle>
        <AlertDescription>This is a outline default Alert.</AlertDescription>
      </Alert>
 
      {/* ----------------------------- Success ---------------------------- */}
      <Alert className="w-full max-w-lg" color={"success"} variant={"outlined"}>
        <AlertIcon>
          {" "}
          <MdErrorOutline />
        </AlertIcon>
        <AlertTitle>Success</AlertTitle>
        <AlertDescription>This is a outline Success Alert.</AlertDescription>
      </Alert>
 
      {/* ----------------------------- Warning ---------------------------- */}
      <Alert className="w-full max-w-lg" color={"warning"} variant={"outlined"}>
        <AlertIcon>
          {" "}
          <MdErrorOutline />
        </AlertIcon>
        <AlertTitle>Warning</AlertTitle>
        <AlertDescription>This is a outline Warning Alert.</AlertDescription>
      </Alert>
 
      {/* ----------------------------- Danger ---------------------------- */}
      <Alert className="w-full max-w-lg" color={"danger"} variant={"outlined"}>
        <AlertIcon>
          {" "}
          <MdErrorOutline />
        </AlertIcon>
        <AlertTitle>Danger</AlertTitle>
        <AlertDescription>This is a outline Danger Alert.</AlertDescription>
      </Alert>
 
      {/* ------------------------------ Info ----------------------------- */}
      <Alert className="w-full max-w-lg" color={"info"} variant={"outlined"}>
        <AlertIcon>
          {" "}
          <MdErrorOutline />
        </AlertIcon>
        <AlertTitle>Info</AlertTitle>
        <AlertDescription>This is a outline Info Alert.</AlertDescription>
      </Alert>
    </div>
  )
}
 
export default AlertOutline