Grouped components into folders

client/components/login/LoginForm.tsx

@@ -0,0 +1,40 @@
+import { FC } from "react"
+import { useForm, SubmitHandler } from "react-hook-form"
+
+import FormField from "../common/form/FormField"
+import InlineLink from "../common/InlineLink"
+import SubmitButton from "../common/form/SubmitButton"
+
+interface LoginFormValues {
+  username: string
+  password: string
+}
+
+const LoginForm: FC = () => {
+  const { register, handleSubmit } = useForm<LoginFormValues>()
+  const onSubmit: SubmitHandler<LoginFormValues> = (data) => console.log(data)
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+      <FormField
+        label="Username"
+        className="py-2 px-2 outline-2 w-full"
+        {...register("username")}
+      />
+      <FormField
+        label="Password"
+        type="password"
+        {...register("password")}
+        className="py-2 px-2 outline-2 w-full"
+        bottomElement={
+          <InlineLink to="#" className="block mt-2">
+            Trouble logging in?
+          </InlineLink>
+        }
+      />
+      <SubmitButton className="w-full" value="Log In" />
+    </form>
+  )
+}
+
+export default LoginForm