Alert

An alert component with multiple types that provides feedback

Galaxy Alert

A galactic alert for feedbacks. This variant takes three props: type, title, message.

Preview

Zeltron Whisper

Everything is on track

import React from "react";
import { FaCheckCircle, FaExclamationTriangle, FaTimesCircle } from "react-icons/fa";

const Alert = ({ type = "success", title, message }) => {
  const alertStyles = {
    success: {
      bgColor: "bg-green-50",
      borderColor: "border-green-400",
      icon: <FaCheckCircle className="text-green-600 w-5 h-5" />,
      textColor: "text-gray-900"
    },
    warning: {
      bgColor: "bg-yellow-50",
      borderColor: "border-yellow-400",
      icon: <FaExclamationTriangle className="text-yellow-600 w-5 h-5" />,
      textColor: "text-gray-900"
    },
    failure: {
      bgColor: "bg-red-50",
      borderColor: "border-red-400",
      icon: <FaTimesCircle className="text-red-600 w-5 h-5" />,
      textColor: "text-gray-900"
    }
  };

  const { bgColor, borderColor, icon, textColor } = alertStyles[type] || alertStyles.success;

  return (
    <div className={`rounded-xl border ${borderColor} ${bgColor} p-4 w-[250px]`}>
      <div className="flex items-start gap-2">
        {icon}
        <div className="flex-1">
          <strong className={`block text-sm font-semibold ${textColor}`}>{title}</strong>
          <p className="mt-1 text-xs text-gray-700">{message}</p>
        </div>
      </div>
    </div>
  );
};

export default Alert;

Usage Example

import React from "react";
import Alert from "./components/Comp/Alert/GalaxyAlert";

const App = () => {
  return (
    <div>
      <Alert />
      {/* 
      <Alert type="success" title="Success!" message="Everything is on track." />
      <Alert type="warning" title="Warning!" message="Check your settings." />
      <Alert type="failure" title="Error!" message="Something went wrong." /> 
      */}
    </div>
  );
};

export default App;

Krythar Wail Alert

A galactic alert that provides critical feedback in the galaxy. This variant takes three props: type, title, message.

Preview

Krythar Wail

Everything is good.

import React from "react";

const Alert = ({ type = "success", title, message }) => {
  const alertStyles = {
    success: {
      bgColor: "bg-green-50",
      borderColor: "border-green-500",
      border: "border-l-4"
    },
    warning: {
      bgColor: "bg-yellow-50",
      borderColor: "border-yellow-500",
      border: "border-l-4"
    },
    failure: {
      bgColor: "bg-red-50",
      borderColor: "border-red-500",
      border: "border-l-4"
    }
  };

  const { bgColor, borderColor, border } = alertStyles[type] || alertStyles.success;

  return (
    <div className={`rounded-xl ${border} ${borderColor} ${bgColor} p-4 w-[300px]`}>
      <strong className="block text-lg font-bold">{title}</strong>
      <p className="mt-1 text-sm">{message}</p>
    </div>
  );
};

export default Alert;

Usage Example

import React from "react";
import Alert from "./components/comp/Alert/KrytharWailAlert";

const App = () => {
  return (
    <div>
      <Alert />
      {/* 
      <Alert type="success" title="Success!" message="Everything is on track." />
      <Alert type="warning" title="Warning!" message="Check your settings." />
      <Alert type="failure" title="Error!" message="Something went wrong." /> 
      */}
    </div>
  );
};

export default App;