sendou.ink/app/components/Alert.tsx

import clsx from "clsx";
import type * as React from "react";
import { AlertIcon } from "./icons/Alert";
import { ErrorIcon } from "./icons/Error";
import { CheckmarkIcon } from "./icons/Checkmark";
import { assertUnreachable } from "~/utils/types";

export type AlertVariation = "INFO" | "WARNING" | "ERROR" | "SUCCESS";

export function Alert({
  children,
  textClassName,
  alertClassName,
  variation = "INFO",
  tiny = false,
}: {
  children: React.ReactNode;
  textClassName?: string;
  alertClassName?: string;
  variation?: AlertVariation;
  tiny?: boolean;
}) {
  return (
    <div
      className={clsx("alert", alertClassName, {
        tiny,
        warning: variation === "WARNING",
        error: variation === "ERROR",
        success: variation === "SUCCESS",
      })}
    >
      <Icon variation={variation} />{" "}
      <div className={textClassName}>{children}</div>
    </div>
  );
}

function Icon({ variation }: { variation: AlertVariation }) {
  switch (variation) {
    case "INFO":
      return <AlertIcon />;
    case "WARNING":
      return <AlertIcon />;
    case "ERROR":
      return <ErrorIcon />;
    case "SUCCESS":
      return <CheckmarkIcon />;
    default:
      assertUnreachable(variation);
  }
}