WIP/Input and Textarea

pkgs/frontend/.eslintrc.cjs

@@ -45,7 +45,9 @@ module.exports = {
           { name: "NavLink", linkAttribute: "to" },
         ],
         "import/resolver": {
-          typescript: {},
+          typescript: {
+            project: "pkgs/frontend/tsconfig.json",
+          },
         },
       },
     },

pkgs/frontend/app/components/Input.tsx

@@ -0,0 +1,16 @@
+import { ChangeEvent } from "react";
+
+interface InputProps {
+	value: string | number;
+	onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+
+export default function Input({ value, onChange }: InputProps) {
+	return (
+		<input
+			className="input input-bordered w-full"
+			value={value}
+			onChange={onChange}
+		/>
+	);
+}

pkgs/frontend/app/components/Textarea.tsx

@@ -0,0 +1,16 @@
+import { ChangeEvent } from "react";
+
+interface TextareaProps {
+	value: string | number;
+	onChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+}
+
+export default function Textarea({ value, onChange }: TextareaProps) {
+	return (
+		<textarea
+			className="textarea textarea-bordered w-full"
+			value={value}
+			onChange={onChange}
+		/>
+	);
+}

pkgs/frontend/app/routes/_index.tsx

@@ -1,4 +1,7 @@
 import type { MetaFunction } from "@remix-run/node";
+import Input from "~/components/Input";
+import Textarea from "~/components/Textarea";
+import { useState } from "react";
 
 export const meta: MetaFunction = () => {
 	return [
@@ -8,11 +11,22 @@ export const meta: MetaFunction = () => {
 };
 
 export default function Index() {
+	const [inputValue, setInputValue] = useState("foo");
+	const [textareaValue, setTextareaValue] = useState("bar");
+
 	return (
 		<>
 			<button className="btn rounded">
 				<span className="loading loading-spinner" />
 			</button>
+			<Input
+				value={inputValue}
+				onChange={(e) => setInputValue(e.target.value)}
+			/>
+			<Textarea
+				value={textareaValue}
+				onChange={(e) => setTextareaValue(e.target.value)}
+			/>
 		</>
 	);
 }