Toaster component created

lib/component/toaster/Toaster.tsx

@@ -0,0 +1,32 @@
+import type { ToasterProps } from "$/types/Toaster";
+import { Transition } from "@headlessui/react";
+import clsx from "clsx";
+
+
+export default function Toaster({
+	toast,
+	className
+}: ToasterProps){
+	return (
+		<Transition
+			show={toast.length > 1 || (toast.length === 1 && toast[0].hideTime > new Date())}
+			enter="transform transition duration-500"
+			enterFrom="-translate-y-[25vh]"
+			enterTo="translate-y-0 ease-out"
+			leave="transform transition duration-500"
+			leaveFrom="translate-y-0 ease-in"
+			leaveTo="-translate-y-[25vh]"
+		>
+			<div
+				className={clsx(
+					"fixed top-16 left-1/2 -translate-x-1/2 z-100",
+					"flex flex-col items-center justify-center",
+					"shadow-lg shadow-black/40",
+					className
+				)}
+			>
+				{ toast.map((toast) => (<div key={toast.id}>{toast.message}</div>)) }
+			</div>
+		</Transition>
+	);
+}