feat: add character creation page components and hooks

Co-authored-by: aider (ollama/qwen2.5-coder:7b) <aider@aider.chat>

src/app/page.tsx

@@ -1,10 +1,16 @@
 import MenuButton from "@/components/MenuButton";
+import Link from "next/link";
 
 export default function Home() {
   return (
     <div className="flex flex-col h-screen">
       <main className="flex-1 flex flex-col items-center justify-center gap-6">
         <MenuButton text="Characters" url="/characters" />
+        <Link href="/create-character">
+          <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+            Create Character
+          </button>
+        </Link>
       </main>
     </div>
   );

src/components/CharacterForm.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { useCharacterForm } from "@/hooks/useCharacterForm";
+
+const CharacterForm: React.FC = () => {
+  const { handleSubmit, register, errors } = useCharacterForm();
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div>
+        <label htmlFor="name">Name:</label>
+        <input
+          id="name"
+          name="name"
+          ref={register({ required: true })}
+          className={`border p-2 ${errors.name ? "border-red-500" : ""}`}
+        />
+        {errors.name && <span className="text-red-500">This field is required</span>}
+      </div>
+      <div>
+        <label htmlFor="species">Species:</label>
+        <select id="species" name="species" ref={register}>
+          <option value="">Select a species</option>
+          {/* Add options for different species */}
+        </select>
+      </div>
+      <div>
+        <label htmlFor="class">Class:</label>
+        <select id="class" name="class" ref={register}>
+          <option value="">Select a class</option>
+          {/* Add options for different classes */}
+        </select>
+      </div>
+      <button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+        Create Character
+      </button>
+    </form>
+  );
+};
+
+export default CharacterForm;

src/components/ClassSelector.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+const ClassSelector: React.FC = () => {
+  return (
+    <div>
+      <h2>Classes</h2>
+      {/* Add logic to display and select classes */}
+      {/* Allow users to add custom class entries */}
+    </div>
+  );
+};
+
+export default ClassSelector;

src/components/SpeciesSelector.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+const SpeciesSelector: React.FC = () => {
+  return (
+    <div>
+      <h2>Species</h2>
+      {/* Add logic to display and select species */}
+      {/* Allow users to add custom species entries */}
+    </div>
+  );
+};
+
+export default SpeciesSelector;

src/hooks/useCharacterForm.ts

@@ -0,0 +1,14 @@
+import { useForm } from "react-hook-form";
+
+const useCharacterForm = () => {
+  const { register, handleSubmit, errors } = useForm();
+
+  const onSubmit = (data: any) => {
+    console.log(data);
+    // Handle form submission logic here
+  };
+
+  return { register, handleSubmit, errors };
+};
+
+export default useCharacterForm;