Mathis
442bebd022
This commit introduces multiple new UI components for the project. The added components include ToggleGroup, RadioGroup, Pagination, ToastBox, Textarea, Breadcrumb, Skeleton, Collapsible, Checkbox, Calendar, Accordion, Sonner, and CopyButton. These components enhance the flexibility and functionality of the UI, providing essential elements for better user interaction.
78 lines
1.5 KiB
TypeScript
78 lines
1.5 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>
|
|
);
|
|
}
|