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 { View, Text } from "react-native";
import { Feather } from "@expo/vector-icons";

const Alert = ({ type, title, message }) => {
  const alertStyles = {
    success: {
      bgColor: "bg-green-50",
      borderColor: "border-green-400",
      icon: "check-circle",
      iconColor: "#16a34a",
    },
    warning: {
      bgColor: "bg-yellow-50",
      borderColor: "border-yellow-400",
      icon: "alert-triangle",
      iconColor: "#ca8a04",
    },
    failure: {
      bgColor: "bg-red-50",
      borderColor: "border-red-400",
      icon: "x-circle",
      iconColor: "#dc2626",
    },
  };

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

  return (
    <View className={`rounded-xl border ${borderColor} ${bgColor} p-4 w-64`}>
      <View className="flex flex-row items-start gap-4">
        <Feather name={icon} size={24} color={iconColor} />
        <View className="flex-1">
          <Text className="text-lg font-medium text-gray-900">{title}</Text>
          <Text className="mt-1 text-sm text-gray-700">{message}</Text>
        </View>
      </View>
    </View>
  );
};

export default Alert;

Usage Example

import React from "react";
import { View } from "react-native";
import Alert from "./components/Alert/GalaxyAlert";

const App = () => {
  return (
    <View>
      <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." /> 
      */}
    </View>
  );
};

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";
import { View, Text } from "react-native";

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

  const { bgColor, borderColor, border } =
    alertStyles[type] || alertStyles.success;
  return (
    <View className={`rounded-xl ${bgColor} ${borderColor} ${border} p-4 w-64`}>
      <Text className="text-lg font-bold">{title}</Text>
      <Text className="mt-1 text-sm">{message}</Text>
    </View>
  );
};

export default Alert;

Usage Example

import React from "react";
import { View } from "react-native";
import Alert from "./components/Alert/KrytharWailAlert";

const App = () => {
  return (
    <View>
      <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." /> 
      */}
    </View>
  );
};

export default App;