Most simple components created

src/routes/modal/index.tsx

@@ -0,0 +1,111 @@
+import { DangerButton, PrimaryButton, SuccessButton, WarningButton } from "$/component/button";
+import { Modal } from "$/component/modal";
+import { createFileRoute } from "@tanstack/react-router";
+import { useState } from "react";
+
+
+export const Route = createFileRoute("/modal/")({
+	component: ModalPage
+});
+
+
+function ModalPage(){
+	const [ displayCenteredModal, setDisplayCenteredModal ] = useState(false);
+	const [ displayTopModal, setDisplayTopModal ] = useState(false);
+
+
+	return (
+		<div
+			className="flex flex-col items-center justify-center gap-y-16"
+		>
+			<h1
+				className="text-4xl"
+			>
+				Modals
+			</h1>
+			<PrimaryButton
+				onClick={() => setDisplayCenteredModal(true)}
+			>
+				Centered Modal
+			</PrimaryButton>
+			<PrimaryButton
+				onClick={() => setDisplayTopModal(true)}
+			>
+				Top Modal
+			</PrimaryButton>
+			<div
+				className="flex flex-row items-center justify-center gap-x-4">
+				<PrimaryButton
+					onClick={() => {}}
+				>
+					Timed Modal
+				</PrimaryButton>
+				<SuccessButton
+					onClick={() => {}}
+				>
+					Timed Modal
+				</SuccessButton>
+				<WarningButton
+					onClick={() => {}}
+				>
+					Timed Modal
+				</WarningButton>
+				<DangerButton
+					onClick={() => {}}
+				>
+					Timed Modal
+				</DangerButton>
+			</div>
+
+			<DemoCenteredModal
+				display={displayCenteredModal}
+				onClose={() => setDisplayCenteredModal(false)}
+			/>
+			<DemoTopModal
+				display={displayTopModal}
+				onClose={() => setDisplayTopModal(false)}
+			/>
+		</div>
+	);
+}
+
+function DemoCenteredModal({
+	display,
+	onClose
+}:{
+	display: boolean;
+	onClose: () => void;
+}){
+	return (
+		<Modal
+			display={display}
+			onClose={onClose}
+			className="bg-(--bg-color) text-(--text-color)"
+		>
+			<span>This is the centered modal.</span>
+			<span>I am giving multiple lines so we can</span>
+			<span>see how it looks.</span>
+		</Modal>
+	);
+}
+
+function DemoTopModal({
+	display,
+	onClose
+}:{
+	display: boolean;
+	onClose: () => void;
+}){
+	return (
+		<Modal
+			display={display}
+			onClose={onClose}
+			className="bg-(--bg-color) text-(--text-color)"
+			top={true}
+		>
+			<span>This is the top modal.</span>
+			<span>I am giving multiple lines so we can</span>
+			<span>see how it looks.</span>
+		</Modal>
+	);
+}