MattrixwvReactComponents/src/routes/buttons/index.tsx

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/ButtonTypes";
import type { TabGroupContent } from "$/types/TabTypes";
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
}: Readonly<{
	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>
	);
}