Many inputs added

src/routes/input/index.tsx

@@ -1,6 +1,6 @@
 import { MattrixwvTabGroup } from "$/component/tab";
 import type { TabGroupContent } from "$/types/Tab";
-import { SwitchContent, TextContent } from "@/util/InputUtils";
+import { FileContent, SwitchContent, TextContent } from "@/util/InputUtils";
 import { createFileRoute } from "@tanstack/react-router";
 
 
@@ -11,6 +11,7 @@ export const Route = createFileRoute('/input/')({
 
 function InputPage(){
 	const tabs: TabGroupContent[] = [
+		{ tab: "Input", content: <FileContent/> },
 		{ tab: "Text", content: <TextContent/> },
 		{ tab: "Switch", content: <SwitchContent/> }
 	];

src/util/InputUtils.tsx

@@ -1,5 +1,5 @@
 import { Button } from "$/component/button";
-import { OptionInput, SelectInput, TextInput } from "$/component/input";
+import { DragAndDropFileInput, FileInput, NumberInput, 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";
@@ -11,7 +11,7 @@ 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 TextArea from "$/component/input/text/TextArea";
 import type { MattrixwvSwitchSize } from "$/types/Input";
 import { useState } from "react";
 import { BsCheck, BsX } from "react-icons/bs";
@@ -460,13 +460,13 @@ export function TextContent(){
 
 	return (
 		<div
-			className="flex flex-col items-center justify-center gap-y-8 mt-8"
+			className="flex flex-col items-center justify-center gap-y-8 mt-8 w-full"
 		>
 			<TextDisplay title="Text Input">
 				<TextInput placeholder="Text Input" labelClassName="bg-(--bg-color)"/>
 			</TextDisplay>
 			<TextDisplay title="Text Area">
-				<TextArea placeholder="Textarea" labelClassName="bg-(--bg-color)"/>
+				<TextArea placeholder="Textarea" className="resize" labelClassName="bg-(--bg-color)"/>
 			</TextDisplay>
 			<TextDisplay title="Select">
 				<SelectInput label={selected.label} onChange={(newValue) => setSelected(selectOptions.find((option) => option.value === newValue) || selectOptions[0])}>
@@ -482,6 +482,25 @@ export function TextContent(){
 					}
 				</SelectInput>
 			</TextDisplay>
+			<TextDisplay
+				title="Number Input"
+			>
+				<NumberInput
+					labelClassName="bg-(--bg-color)"
+				>
+					Number Test
+				</NumberInput>
+			</TextDisplay>
+			{/*
+			<TextDisplay
+				title="Number Slider"
+			>
+				<NumberSlider
+					min={0}
+					max={10}
+				/>
+			</TextDisplay>
+			*/}
 		</div>
 	);
 }
@@ -502,3 +521,38 @@ function TextDisplay({
 		</div>
 	);
 }
+
+export function FileContent(){
+	return (
+		<div
+			className="flex flex-col items-center justify-center gap-y-8 mt-8 w-full"
+		>
+			<FileDisplay title="File Input">
+				<FileInput
+					showFileName={true}
+					showSize={true}
+				/>
+			</FileDisplay>
+			<FileDisplay title="Drag and Drop File Input">
+				<DragAndDropFileInput/>
+			</FileDisplay>
+		</div>
+	);
+}
+
+function FileDisplay({
+	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>
+	);
+}