Toaster component created

src/main.tsx

@@ -1,4 +1,5 @@
 import ThemeProvider from "$/providers/theme/ThemeProvider";
+import ToasterProvider from "$/providers/toaster/ToasterProvider";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
@@ -17,7 +18,9 @@ declare module "@tanstack/react-router" {
 createRoot(document.getElementById('root')!).render(
 	<StrictMode>
 		<ThemeProvider defaultTheme="dark">
-			<RouterProvider router={router}/>
+			<ToasterProvider className="bg-zinc-700 text-white px-4 py-2 min-w-32 max-w-128 rounded-lg gap-y-4">
+				<RouterProvider router={router}/>
+			</ToasterProvider>
 		</ThemeProvider>
 	</StrictMode>
 );

src/routes/modal/index.tsx

@@ -1,5 +1,7 @@
 import { DangerButton, PrimaryButton, SuccessButton, WarningButton } from "$/component/button";
+import { PrimaryMessageBlock } from "$/component/message";
 import { Modal } from "$/component/modal";
+import { useToaster } from "$/providers/toaster/ToasterProvider";
 import { createFileRoute } from "@tanstack/react-router";
 import { useState } from "react";
 
@@ -12,6 +14,9 @@ export const Route = createFileRoute("/modal/")({
 function ModalPage(){
 	const [ displayCenteredModal, setDisplayCenteredModal ] = useState(false);
 	const [ displayTopModal, setDisplayTopModal ] = useState(false);
+	const [ toasterNumber, setToasterNumber ] = useState(1);
+
+	const { addToast, addSuccess, addWarning, addDanger } = useToaster();
 
 
 	return (
@@ -36,22 +41,22 @@ function ModalPage(){
 			<div
 				className="flex flex-row items-center justify-center gap-x-4">
 				<PrimaryButton
-					onClick={() => {}}
+					onClick={() => { addToast(<PrimaryMessageBlock>Toaster {toasterNumber}</PrimaryMessageBlock>); setToasterNumber(toasterNumber + 1); }}
 				>
 					Timed Modal
 				</PrimaryButton>
 				<SuccessButton
-					onClick={() => {}}
+					onClick={() => { addSuccess(`Success Toaster ${toasterNumber}`); setToasterNumber(toasterNumber + 1); }}
 				>
 					Timed Modal
 				</SuccessButton>
 				<WarningButton
-					onClick={() => {}}
+					onClick={() => { addWarning(`Warning Toaster ${toasterNumber}`); setToasterNumber(toasterNumber + 1); }}
 				>
 					Timed Modal
 				</WarningButton>
 				<DangerButton
-					onClick={() => {}}
+					onClick={() => { addDanger(`Danger Toaster ${toasterNumber}`); setToasterNumber(toasterNumber + 1); }}
 				>
 					Timed Modal
 				</DangerButton>

src/util/InputUtils.tsx

@@ -14,6 +14,8 @@ import WarningCheckbox from "$/component/input/checkbox/WarningCheckbox";
 import DateInput from "$/component/input/date/DateInput";
 import DateTimeInput from "$/component/input/date/DateTimeInput";
 import TimeInput from "$/component/input/date/TimeInput";
+import MultiNumberSlider from "$/component/input/number/MultiNumberSlider";
+import NumberSlider from "$/component/input/number/NumberSlider";
 import DangerRadioButton from "$/component/input/radio/DangerRadioButton";
 import DarkRadioButton from "$/component/input/radio/DarkRadioButton";
 import InfoRadioButton from "$/component/input/radio/InfoRadioButton";
@@ -43,7 +45,7 @@ import { useState } from "react";
 import { BsCheck, BsX } from "react-icons/bs";
 
 
-export function SwitchContent(): React.ReactNode{
+export function SwitchContent(){
 	const sizes: MattrixwvSwitchSize[] = [ "xs", "sm", "md", "lg", "xl" ];
 
 
@@ -761,3 +763,16 @@ export function DateContent(){
 		</div>
 	);
 }
+
+export function SliderContent(){
+	return (
+		<div
+			className="flex flex-col items-center justify-center my-8 gap-y-8"
+		>
+			<NumberSlider
+			/>
+			<MultiNumberSlider
+			/>
+		</div>
+	);
+}