Most simple components created

2025-07-18 23:30:48 -04:00
commit 5421c2346a
134 changed files with 13805 additions and 0 deletions
--- a/src/routes/buttons/index.tsx
+++ b/src/routes/buttons/index.tsx
@@ -0,0 +1,139 @@
+import { DangerButton, DarkButton, LightButton, PrimaryButton, SecondaryButton, SuccessButton, TertiaryButton, WarningButton } from "$/component/button";
+import InfoButton from "$/component/button/InfoButton";
+import MoltenButton from "$/component/button/MoltenButton";
+import { MattrixwvTabGroup } from "$/component/tab";
+import type { ButtonProps, ButtonSize } from "$/types/Button";
+import type { TabGroupContent } from "$/types/Tab";
+import { createFileRoute } from "@tanstack/react-router";
+import { useState, type JSX } from "react";
+import { BsBag } from "react-icons/bs";
+
+
+export const Route = createFileRoute("/buttons/")({
+	component: ButtonPage
+});
+
+
+function ButtonPage(){
+	const [ clickCount, setClickCount ] = useState(0);
+
+
+	const tabs: TabGroupContent[] = [
+		{ tab: "Primary", content: generateTabContent(PrimaryButton, () => setClickCount(clickCount + 1)) },
+		{ tab: "Secondary", content: generateTabContent(SecondaryButton, () => setClickCount(clickCount + 1)) },
+		{ tab: "Tertiary", content: generateTabContent(TertiaryButton, () => setClickCount(clickCount + 1)) },
+		{ tab: "Info", content: generateTabContent(InfoButton, () => setClickCount(clickCount + 1)) },
+		{ tab: "Success", content: generateTabContent(SuccessButton, () => setClickCount(clickCount + 1)) },
+		{ tab: "Warning", content: generateTabContent(WarningButton, () => setClickCount(clickCount + 1)) },
+		{ tab: "Danger", content: generateTabContent(DangerButton, () => setClickCount(clickCount + 1)) },
+		{ tab: "Molten", content: generateTabContent(MoltenButton, () => setClickCount(clickCount + 1)) },
+		{ tab: "Dark", content: generateTabContent(DarkButton, () => setClickCount(clickCount + 1)) },
+		{ tab: "Light", content: generateTabContent(LightButton, () => setClickCount(clickCount + 1)) }
+	];
+
+
+	return (
+		<div
+			className="flex flex-col items-center justify-center"
+		>
+			<h1
+				className="text-4xl"
+			>
+				Count {clickCount}
+			</h1>
+			<MattrixwvTabGroup
+				tabs={tabs}
+			/>
+		</div>
+	);
+}
+
+
+function generateTabContent(Fn: (props: ButtonProps) => JSX.Element, onClick: () => void): React.ReactNode{
+	const sizes: { size: ButtonSize; title: string; }[] = [
+		{ size: "xl", title: "X-Large" },
+		{ size: "lg", title: "Large" },
+		{ size: "md", title: "Medium" },
+		{ size: "sm", title: "Small" },
+		{ size: "xs", title: "X-Small" },
+	];
+
+
+	return (
+		<div
+			className="flex flex-col items-center justify-center gap-y-8 mt-8"
+		>
+			<ButtonDisplay
+				title="Rectangle"
+			>
+				{sizes.map((size) => (<Fn shape="rectangle" size={size.size} key={size.size} onClick={onClick}>{size.title}</Fn>))}
+				<Fn shape="rectangle" size="md" disabled={true} onClick={onClick}>Disabled</Fn>
+			</ButtonDisplay>
+
+			<ButtonDisplay
+				title="Square"
+			>
+				{sizes.map((size) => (<Fn shape="square" size={size.size} key={size.size} onClick={onClick}><BsBag size={20}/></Fn>))}
+			</ButtonDisplay>
+
+			<ButtonDisplay
+				title="Rounding"
+			>
+				<Fn rounding="none" onClick={onClick}>None</Fn>
+				<Fn rounding="sm" onClick={onClick}>Small</Fn>
+				<Fn rounding="md" onClick={onClick}>Medium</Fn>
+				<Fn rounding="lg" onClick={onClick}>Large</Fn>
+				<Fn rounding="full" onClick={onClick}>Full</Fn>
+			</ButtonDisplay>
+
+			<ButtonDisplay
+				title="Outline"
+			>
+				{sizes.map((size) => (<Fn variant="outline" size={size.size} key={size.size} onClick={onClick}>{size.title}</Fn>))}
+				<Fn variant="outline" size="md" disabled={true} onClick={onClick}>Disabled</Fn>
+			</ButtonDisplay>
+
+			<ButtonDisplay
+				title="Ghost"
+			>
+				{sizes.map((size) => (<Fn variant="ghost" size={size.size} key={size.size} onClick={onClick}>{size.title}</Fn>))}
+				<Fn variant="ghost" size="md" disabled={true} onClick={onClick}>Disabled</Fn>
+			</ButtonDisplay>
+
+			<ButtonDisplay
+				title="Outline-Ghost"
+			>
+				{sizes.map((size) => (<Fn variant="outline-ghost" size={size.size} key={size.size} onClick={onClick}>{size.title}</Fn>))}
+				<Fn variant="outline-ghost" size="md" disabled={true} onClick={onClick}>Disabled</Fn>
+			</ButtonDisplay>
+
+			<ButtonDisplay
+				title="Icon"
+			>
+				{sizes.map((size) => (<Fn variant="icon" size={size.size} key={size.size} onClick={onClick}>{<BsBag size={20}/>}</Fn>))}
+				<Fn variant="icon" size="md" disabled={true} onClick={onClick}><BsBag size={20}/></Fn>
+			</ButtonDisplay>
+		</div>
+	);
+}
+
+function ButtonDisplay({
+	title,
+	children
+}:{
+	title: React.ReactNode;
+	children: React.ReactNode;
+}){
+	return (
+		<div
+			className="flex flex-col items-center justify-center gap-y-2"
+		>
+			<h2 className="text-2xl">{title}</h2>
+			<div
+				className="flex flex-row items-center justify-center gap-x-4"
+			>
+				{children}
+			</div>
+		</div>
+	);
+}