MattrixwvReactComponents/src/util/InputUtils.tsx

import { Button } from "$/component/button";
import { OptionInput, SelectInput, TextInput } from "$/component/input";
import ButtonSwitch from "$/component/input/switch/ButtonSwitch";
import DangerSwitch from "$/component/input/switch/DangerSwitch";
import DarkSwitch from "$/component/input/switch/DarkSwitch";
import LightSwitch from "$/component/input/switch/LightSwitch";
import MattrixwvSwitch from "$/component/input/switch/MattrixwvSwitch";
import PrimarySwitch from "$/component/input/switch/PrimarySwitch";
import SecondarySwitch from "$/component/input/switch/SecondarySwitch";
import SuccessDangerSwitch from "$/component/input/switch/SuccessDangerSwitch";
import SuccessSwitch from "$/component/input/switch/SuccessSwitch";
import TertiarySwitch from "$/component/input/switch/TertiarySwitch";
import WarningSwitch from "$/component/input/switch/WarningSwitch";
import TextArea from "$/component/input/TextArea";
import type { MattrixwvSwitchSize } from "$/types/Input";
import { useState } from "react";
import { BsCheck, BsX } from "react-icons/bs";


export function SwitchContent(): React.ReactNode{
	const sizes: MattrixwvSwitchSize[] = [ "xs", "sm", "md", "lg", "xl" ];


	return (
		<div
			className="flex flex-col items-center justify-center gap-y-8 mt-8"
		>
			<SwitchDisplay title="Basic">
				{
					sizes.map((size) => (
						<div
							key={size}
							className="flex flex-row items-center justify-center gap-x-2"
						>
							<MattrixwvSwitch
								className="bg-gray-400 data-checked:bg-blue-600"
								knobClassName="bg-white"
								size={size}
							>
								{size} Switch
							</MattrixwvSwitch>
						</div>
					))
				}
			</SwitchDisplay>
			<SwitchDisplay title="Wide">
				{
					sizes.map((size) => (
						<div
							key={size}
							className="flex flex-row items-center justify-center gap-x-2"
						>
							<MattrixwvSwitch
								className="bg-gray-400 data-checked:bg-blue-600"
								knobClassName="bg-white"
								size={size}
								wide={true}
								offText={<span className="text-black">Off</span>}
								onText="On"
							>
								{size} Switch
							</MattrixwvSwitch>
						</div>
					))
				}
			</SwitchDisplay>
			<SwitchDisplay title="Primary">
				{
					sizes.map((size) => (
						<div
							key={size}
							className="flex flex-row items-center justify-center gap-x-2"
						>
							<PrimarySwitch
								size={size}
							>
								{size} Switch
							</PrimarySwitch>
						</div>
					))
				}
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<PrimarySwitch
						size="md"
						disabled={true}
					>
						Disabled Switch
					</PrimarySwitch>
				</div>
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<PrimarySwitch
						size="md"
						disabled={true}
						checked={true}
					>
						Disabled Switch
					</PrimarySwitch>
				</div>
			</SwitchDisplay>
			<SwitchDisplay title="Secondary">
				{
					sizes.map((size) => (
						<div
							key={size}
							className="flex flex-row items-center justify-center gap-x-2"
						>
							<SecondarySwitch
								size={size}
							>
								{size} Switch
							</SecondarySwitch>
						</div>
					))
				}
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<SecondarySwitch
						size="md"
						disabled={true}
					>
						Disabled Switch
					</SecondarySwitch>
				</div>
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<SecondarySwitch
						size="md"
						disabled={true}
						checked={true}
					>
						Disabled Switch
					</SecondarySwitch>
				</div>
			</SwitchDisplay>
			<SwitchDisplay title="Tertiary">
				{
					sizes.map((size) => (
						<div
							key={size}
							className="flex flex-row items-center justify-center gap-x-2"
						>
							<TertiarySwitch
								size={size}
							>
								{size} Switch
							</TertiarySwitch>
						</div>
					))
				}
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<TertiarySwitch
						size="md"
						disabled={true}
					>
						Disabled Switch
					</TertiarySwitch>
				</div>
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<TertiarySwitch
						size="md"
						disabled={true}
						checked={true}
					>
						Disabled Switch
					</TertiarySwitch>
				</div>
			</SwitchDisplay>
			<SwitchDisplay title="Success">
				{
					sizes.map((size) => (
						<div
							key={size}
							className="flex flex-row items-center justify-center gap-x-2"
						>
							<SuccessSwitch
								size={size}
							>
								{size} Switch
							</SuccessSwitch>
						</div>
					))
				}
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<SuccessSwitch
						size="md"
						disabled={true}
					>
						Disabled Switch
					</SuccessSwitch>
				</div>
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<SuccessSwitch
						size="md"
						disabled={true}
						checked={true}
					>
						Disabled Switch
					</SuccessSwitch>
				</div>
			</SwitchDisplay>
			<SwitchDisplay title="Warning">
				{
					sizes.map((size) => (
						<div
							key={size}
							className="flex flex-row items-center justify-center gap-x-2"
						>
							<WarningSwitch
								size={size}
							>
								{size} Switch
							</WarningSwitch>
						</div>
					))
				}
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<WarningSwitch
						size="md"
						disabled={true}
					>
						Disabled Switch
					</WarningSwitch>
				</div>
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<WarningSwitch
						size="md"
						disabled={true}
						checked={true}
					>
						Disabled Switch
					</WarningSwitch>
				</div>
			</SwitchDisplay>
			<SwitchDisplay title="Danger">
				{
					sizes.map((size) => (
						<div
							key={size}
							className="flex flex-row items-center justify-center gap-x-2"
						>
							<DangerSwitch
								size={size}
							>
								{size} Switch
							</DangerSwitch>
						</div>
					))
				}
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<DangerSwitch
						size="md"
						disabled={true}
					>
						Disabled Switch
					</DangerSwitch>
				</div>
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<DangerSwitch
						size="md"
						disabled={true}
						checked={true}
					>
						Disabled Switch
					</DangerSwitch>
				</div>
			</SwitchDisplay>
			<SwitchDisplay title="Dark">
				{
					sizes.map((size) => (
						<div
							key={size}
							className="flex flex-row items-center justify-center gap-x-2"
						>
							<DarkSwitch
								size={size}
							>
								{size} Switch
							</DarkSwitch>
						</div>
					))
				}
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<DarkSwitch
						size="md"
						disabled={true}
					>
						Disabled Switch
					</DarkSwitch>
				</div>
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<DarkSwitch
						size="md"
						disabled={true}
						checked={true}
					>
						Disabled Switch
					</DarkSwitch>
				</div>
			</SwitchDisplay>
			<SwitchDisplay title="Light">
				{
					sizes.map((size) => (
						<div
							key={size}
							className="flex flex-row items-center justify-center gap-x-2"
						>
							<LightSwitch
								size={size}
							>
								{size} Switch
							</LightSwitch>
						</div>
					))
				}
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<LightSwitch
						size="md"
						disabled={true}
					>
						Disabled Switch
					</LightSwitch>
				</div>
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<LightSwitch
						size="md"
						disabled={true}
						checked={true}
					>
						Disabled Switch
					</LightSwitch>
				</div>
			</SwitchDisplay>
			<SwitchDisplay title="Success Danger">
				{
					sizes.map((size) => (
						<div
							key={size}
							className="flex flex-row items-center justify-center gap-x-2"
						>
							<SuccessDangerSwitch
								size={size}
							>
								{size} Switch
							</SuccessDangerSwitch>
						</div>
					))
				}
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<SuccessDangerSwitch
						size="md"
						disabled={true}
					>
						Disabled Switch
					</SuccessDangerSwitch>
				</div>
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<SuccessDangerSwitch
						size="md"
						disabled={true}
						checked={true}
					>
						Disabled Switch
					</SuccessDangerSwitch>
				</div>
			</SwitchDisplay>
			<SwitchDisplay title="Button">
				<div
					className="flex flex-row items-center justify-center gap-x-2"
				>
					<ButtonSwitch
						className="cursor-pointer transition-all duration-250"
						onNode={<Button size="sm" shape="square" className="bg-green-600 border-green-600"><BsCheck size={32}/></Button>}
						offNode={<Button size="sm" shape="square" className="bg-red-600 border-red-600"><BsX size={32}/></Button>}
					/>
				</div>
			</SwitchDisplay>
		</div>
	);
}

function SwitchDisplay({
	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>
	);
}

export function TextContent(){
	const selectOptions = [
		{value: "1", label: "Test 1"},
		{value: "2", label: "Test 2"},
		{value: "3", label: "Test 3"},
		{value: "4", label: "Test 4"},
		{value: "5", label: "Test 5"},
		{value: "6", label: "Test 6"},
		{value: "7", label: "Test 7"},
		{value: "8", label: "Test 8"},
		{value: "9", label: "Test 9"},
		{value: "10", label: "Test 10"},
		{value: "11", label: "Test 11"},
		{value: "12", label: "Test 12"},
		{value: "13", label: "Test 13"},
		{value: "14", label: "Test 14"},
		{value: "15", label: "Test 15"},
		{value: "16", label: "Test 16"},
		{value: "17", label: "Test 17"},
		{value: "18", label: "Test 18"},
		{value: "19", label: "Test 19"}
	];

	const [ selected, setSelected ] = useState(selectOptions[0]);

	return (
		<div
			className="flex flex-col items-center justify-center gap-y-8 mt-8"
		>
			<TextDisplay title="Text Input">
				<TextInput placeholder="Text Input" labelClassName="bg-(--bg-color)"/>
			</TextDisplay>
			<TextDisplay title="Text Area">
				<TextArea placeholder="Textarea" labelClassName="bg-(--bg-color)"/>
			</TextDisplay>
			<TextDisplay title="Select">
				<SelectInput label={selected.label} onChange={(newValue) => setSelected(selectOptions.find((option) => option.value === newValue) || selectOptions[0])}>
					{
						selectOptions.map((option) => (
							<OptionInput
								key={option.value}
								className="bg-neutral-600 hover:bg-neutral-700"
								value={option.value}
								children={option.label}
							/>
						))
					}
				</SelectInput>
			</TextDisplay>
		</div>
	);
}

function TextDisplay({
	title,
	children
}:{
	title: React.ReactNode;
	children: React.ReactNode;
}){
	return (
		<div
			className="flex flex-col items-center justify-center gap-y-2 w-full"
		>
			<h2 className="text-2xl">{title}</h2>
			{children}
		</div>
	);
}