Mathis
74ec86c684
This commit includes several User Interface components such as Button, DropdownMenu, FlipWords, HeroParallax, Input, Label, NavigationMenu and ToastBox. Each component was developed individually and has different attributes and behaviors. This will significantly improve the user experience and interactivity of the application.
63 lines
1.4 KiB
TypeScript
63 lines
1.4 KiB
TypeScript
import {Bug, CircleAlert, CircleCheckBig, CircleHelp, MessageSquareText, Minus, OctagonX, Plus} from "lucide-react";
|
|
import React from "react";
|
|
|
|
|
|
export enum toastType {
|
|
info = "info",
|
|
warn = "warn",
|
|
error = "error",
|
|
refused= "refused",
|
|
success = "success",
|
|
add = "add",
|
|
del = "del",
|
|
message = "message"
|
|
}
|
|
|
|
export function ToastBox({title, message, type}: {title?: string, message: string, type: toastType}) {
|
|
let icon: any;
|
|
let bgColor: string;
|
|
switch (type) {
|
|
case toastType.message :
|
|
icon = <MessageSquareText />
|
|
bgColor = 'bg-accent'
|
|
break
|
|
case toastType.add:
|
|
icon = <Plus />
|
|
bgColor = 'bg-accent'
|
|
break
|
|
case toastType.del:
|
|
icon = <Minus />
|
|
bgColor = 'bg-accent'
|
|
break
|
|
case toastType.info:
|
|
icon = <CircleHelp />
|
|
bgColor = 'bg-accent'
|
|
break
|
|
case toastType.warn:
|
|
icon = <CircleAlert />
|
|
bgColor = 'bg-orange-500'
|
|
break
|
|
case toastType.error:
|
|
icon = <Bug />
|
|
bgColor = 'bg-red-500'
|
|
break
|
|
case toastType.success:
|
|
icon = <CircleCheckBig />
|
|
bgColor = 'bg-green-500'
|
|
break
|
|
case toastType.refused:
|
|
icon = <OctagonX />
|
|
bgColor = 'bg-red-700'
|
|
break
|
|
}
|
|
|
|
return (
|
|
<div className={`flex flex-row items-center gap-2 scale-90 md:scale-100 p-2 rounded border ${bgColor}`}>
|
|
{icon}
|
|
<div className={"flex flex-col justify-center items-start"}>
|
|
{title && <h3 className={"text-nowrap font-bold text-xl"}>{title}</h3>}
|
|
<p className={"text-wrap"}>{message}</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |