Alert

Preview

Code

import { Warning, CheckCircle, Info } from "@phosphor-icons/react";
import { classNames } from "../../helpers";
interface AlertProperties {
  type: string;
  title: string;
  content?: string;
}
const Alert = ({ type, content, title }: AlertProperties) => {
  return (
    <div
      className={classNames(type === "success"
      ? "bg-green-50"
      : type === "error"
      ? "bg-yellow-50"
      : "bg-blue-50", "rounded-md p-4")}
    >
      <div className="flex">
        <div className="flex-shrink-0">
          {type === "success" && (
            <CheckCircle
              className="h-5 w-5 text-green-400"
              aria-hidden="true"
            />
          )}
          {type === "error" && (
            <Warning className="h-5 w-5 text-yellow-400" aria-hidden="true" />
          )}
          {type === "information" && (
            <Info className="h-5 w-5 text-blue-400" aria-hidden="true" />
          )}
        </div>
        <div className="ml-3">
          <h3
            className={classNames(type === "success"
            ? "text-green-800"
            : type === "error"
            ? "text-yellow-800"
            : "text-blue-800", "text-sm font-medium" )}
          >
            {title}
          </h3>
          {content && (
            <div
              className={classNames(type === "success"
              ? "text-green-700"
              : type === "error"
              ? "text-yellow-700"
              : "text-blue-700", "mt-2 text-sm")}
            >
              <p>{content}</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default Alert;

Properties

Attribute	Type	Valid Values	Description
type	string	succcess, error
title	string
content	string?