Added styled to word form

app/components/WordForm.tsx → app/components/word-form/index.tsx

@@ -1,7 +1,16 @@
 import { Form, useTransition } from "remix";
 import { Word, WordType } from "~/models/word";
+import type { LinksFunction } from "remix";
+import styles from "./styles.css";
 
-export default function WordForm({ word }: { word?: Word }) {
+export const links: LinksFunction = () => [
+  {
+    rel: "stylesheet",
+    href: styles,
+  },
+];
+
+export function WordForm({ word }: { word?: Word }) {
   let transition = useTransition();
 
   return (

app/components/word-form/styles.css

@@ -0,0 +1,13 @@
+.word-form label {
+  font-size: 0.8em;
+  display: block;
+}
+
+.word-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+  border: 1px solid var(--color-gray-dark);
+  border-radius: 0.5rem;
+}

app/routes/words/add.tsx

@@ -1,16 +1,9 @@
 import { redirect } from "remix";
 import type { ActionFunction, LinksFunction } from "remix";
 import { supabase } from "~/libs/supabase-client";
-import WordForm from "~/components/WordForm";
+import { WordForm, links as formStyles } from "~/components/word-form";
 
-import sharedStyles from "~/styles/words/shared.css";
-
-export const links: LinksFunction = () => [
-  {
-    rel: "stylesheet",
-    href: sharedStyles,
-  },
-];
+export const links: LinksFunction = () => [...formStyles()];
 
 export const action: ActionFunction = async ({ request }) => {
   const formData = await request.formData();

app/routes/words/edit.$id.tsx

@@ -1,17 +1,10 @@
 import { useLoaderData, redirect } from "remix";
 import type { LoaderFunction, ActionFunction, LinksFunction } from "remix";
-import WordForm from "~/components/WordForm";
+import { WordForm, links as formSyles } from "~/components/word-form";
 import { Word } from "~/models/word";
 import { supabase } from "~/libs/supabase-client";
 
-import sharedStyles from "~/styles/words/shared.css";
-
-export const links: LinksFunction = () => [
-  {
-    rel: "stylesheet",
-    href: sharedStyles,
-  },
-];
+export const links: LinksFunction = () => [...formSyles()];
 
 export const action: ActionFunction = async ({ request, params }) => {
   const formData = await request.formData();