Merge pull request #172 from hackdays-io/feature/input-and-textarea-c…

…hakra

ChakraV3によるCommonInputとCommonTextareaコンポーネント

pkgs/frontend/app/components/Input.tsx

@@ -0,0 +1,13 @@
+import {
+	Input as ChakraInput,
+	InputProps as ChakraInputProps,
+} from "@chakra-ui/react";
+
+interface InputProps extends Omit<ChakraInputProps, "value"> {
+	value: string | number;
+	onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const Input = ({ value, onChange }: InputProps) => {
+	return <ChakraInput value={value} onChange={onChange} />;
+};

pkgs/frontend/app/components/TextArea.tsx

@@ -0,0 +1,13 @@
+import {
+	Textarea as ChakraTextarea,
+	TextareaProps as ChakraTextareaProps,
+} from "@chakra-ui/react";
+
+interface TextAreaProps extends Omit<ChakraTextareaProps, "value"> {
+	value: string;
+	onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+}
+
+export const TextArea = ({ value, onChange }: TextAreaProps) => {
+	return <ChakraTextarea value={value} onChange={onChange} />;
+};

pkgs/frontend/app/routes/_index.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import {
 	Box,
 	Button,
@@ -12,6 +13,8 @@ import {
 } from "@chakra-ui/react";
 import type { MetaFunction } from "@remix-run/node";
 import { ColorModeToggle } from "../components/color-mode-toggle";
+import { Input } from "~/components/Input";
+import { TextArea } from "~/components/TextArea";
 import { CommonButton } from "~/components/CommonButton";
 
 export const meta: MetaFunction = () => {
@@ -22,12 +25,20 @@ export const meta: MetaFunction = () => {
 };
 
 export default function Index() {
+	const [inputValue, setInputValue] = useState("Hello");
+	const [textareaValue, setTextareaValue] = useState("World");
+
 	return (
 		<Box textAlign="center" fontSize="xl" pt="30vh">
-			<CommonButton width="full" backgroundColor="red" size="lg" color="blue">
-				<>Click me</>
-			</CommonButton>
 			<VStack gap="8">
+				<Input
+					value={inputValue}
+					onChange={(e) => setInputValue(e.target.value)}
+				/>
+				<TextArea
+					value={textareaValue}
+					onChange={(e) => setTextareaValue(e.target.value)}
+				/>
 				<img alt="chakra logo" src="/static/logo.svg" width="80" height="80" />
 				<Heading size="2xl" letterSpacing="tight">
 					Welcome to Chakra UI v3 + Remix