🚧 見た目制作

wappon28dev · Nov 4, 2024 · a0c4dc9 · a0c4dc9
1 parent b3edd6f
commit a0c4dc9
Show file tree

Hide file tree

Showing 2 changed files with 147 additions and 3 deletions.
diff --git a/src/components/sva/contactField.ts b/src/components/sva/contactField.ts
@@ -0,0 +1,56 @@
+import { fieldAnatomy } from "@ark-ui/react";
+import { sva } from "panda/css";
+
+/**
+ * Ark UI の [Popover コンポーネント](https://ark-ui.com/react/docs/components/popover) の基底スタイル
+ *
+ * 書き方 refs:
+ * - https://panda-css.com/docs/concepts/slot-recipes
+ * - https://ark-ui.com/react/docs/guides/styling#styling-with-panda-css
+ * - https://speakerdeck.com/ikumatadokoro/panda-css-to-ark-ui-dehazimeruge-ren-kai-fa?slide=31
+ */
+export const svaContactField = sva({
+  className: "ContactField",
+  slots: fieldAnatomy.keys(),
+  base: {
+    root: {
+      display: "grid",
+      gap: "0.5rem",
+      gridTemplateColumns: "1fr",
+      width: "100%",
+      maxWidth: "700px",
+      minWidth: "500px",
+      borderRadius: "md",
+    },
+    textarea: {
+      p: "2",
+      bg: "white.0",
+      height: "200px",
+      rounded: "md",
+      shadow: "md",
+      duration: "200ms",
+      width: "100%",
+    },
+    select: {
+      p: "2",
+      bg: "white.0",
+      border: "1px solid",
+      rounded: "md",
+      shadow: "md",
+      duration: "200ms",
+    },
+    input: {
+      p: "2",
+      bg: "white.0",
+      rounded: "md",
+      shadow: "md",
+      width: "100%",
+      _open: {
+        //
+      },
+      _closed: {
+        //
+      },
+    },
+  },
+});
diff --git a/src/routes/contact/index.tsx b/src/routes/contact/index.tsx
@@ -1,14 +1,102 @@
+import { Field } from "@ark-ui/react";
 import { createFileRoute } from "@tanstack/react-router";
 import { styled as p } from "panda/jsx";
+import { useForm } from "react-hook-form";
+import { Button } from "@/components/cva/Button";
+import { svaContactField } from "@/components/sva/contactField";
 
 export const Route = createFileRoute("/contact/")({
   component: () => {
-    const { uuid } = Route.useParams<{ uuid: string }>();
+    const contactField = svaContactField();
+    const { register } = useForm<FormData>();
+
+    type FormData = {
+      mail: string;
+      name: string;
+      subject: string;
+      content: string;
+    };
 
     return (
       <p.div>
-        <p.h1>Contact</p.h1>
-        <p.p>Hello /contact/! - {uuid}</p.p>
+        <p.div py={24}>
+          <p.h1 fontSize="4xl" fontWeight="bold" textAlign="center">
+            Contact
+          </p.h1>
+        </p.div>
+        <form>
+          <p.div>
+            <p.div display="flex" justifyContent="center">
+              <p.div>
+                <p.p fontSize="xl" fontWeight="bold" pb={2}>
+                  メールアドレス*
+                </p.p>
+                <Field.Root className={contactField.root}>
+                  <Field.Input
+                    className={contactField.input}
+                    {...register("mail", { required: true })}
+                  />
+                </Field.Root>
+              </p.div>
+            </p.div>
+            <p.div
+              display="flex"
+              justifyContent="center"
+              pt={{ base: 12, md: 12, xl: 24 }}
+            >
+              <p.div>
+                <p.p fontSize="xl" fontWeight="bold" pb={2}>
+                  お名前*
+                </p.p>
+                <Field.Root className={contactField.root}>
+                  <Field.Input
+                    className={contactField.input}
+                    {...register("name", { required: true })}
+                  />
+                </Field.Root>
+              </p.div>
+            </p.div>
+            <p.div
+              display="flex"
+              justifyContent="center"
+              pt={{ base: 12, md: 12, xl: 24 }}
+            >
+              <p.div>
+                <p.p fontSize="xl" fontWeight="bold" pb={2}>
+                  件名*
+                </p.p>
+                <Field.Root className={contactField.root}>
+                  <Field.Input
+                    className={contactField.input}
+                    {...register("subject", { required: true })}
+                  />
+                </Field.Root>
+              </p.div>
+            </p.div>
+            <p.div
+              display="flex"
+              justifyContent="center"
+              pt={{ base: 12, md: 12, xl: 24 }}
+            >
+              <p.div>
+                <p.p fontSize="xl" fontWeight="bold" pb={2}>
+                  本文*
+                </p.p>
+                <Field.Root className={contactField.root}>
+                  <Field.Textarea
+                    className={contactField.textarea}
+                    {...register("content", { required: true })}
+                  />
+                </Field.Root>
+              </p.div>
+            </p.div>
+            <p.div alignContent="center" py={24}>
+              <p.div display="flex" justifyContent="center">
+                <Button type="submit">送信</Button>
+              </p.div>
+            </p.div>
+          </p.div>
+        </form>
       </p.div>
     );
   },