✨ #132 Create gacha.tsx

components/gacha.tsx

@@ -0,0 +1,20 @@
+import { useState } from "react"
+
+import styles from "../styles/gacha.module.css"
+import Link from "next/link"
+
+const Gacha = () => {
+  const [form, setForm] = useState<number | null>(null)
+
+  return (
+    <div className={styles.wrapper}>
+      <button className={styles.button}>ガチャを回す</button>
+
+      <div className={styles.result}>
+        <Link href="form1">Form1</Link>
+      </div>
+    </div>
+  )
+}
+
+export default Gacha

pages/index.tsx

@@ -6,6 +6,7 @@ import Header from '../components/header'
 import styles from "../styles/style.module.css"
 import Description from '../components/description'
 import Meta from '../components/meta'
+import Gacha from '../components/gacha'
 
 const Home: NextPage = () => (
   <>
@@ -47,7 +48,9 @@ const Home: NextPage = () => (
       </section>
 
       <section className={styles.section}>
-        <h2 className={styles.h2}>&lt;!-- フォームガチャを回す（実装中🙇‍♂️） --&gt;</h2>
+        <h2 className={styles.h2}>フォームガチャを回す（実装中👷‍♂️）</h2>
+
+        <Gacha />
 
       </section>
 

styles/gacha.module.css

@@ -0,0 +1,23 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0 30px;
+  margin: 10px auto 30px;
+  padding: 30px 0;
+}
+
+.button {
+  padding: 15px 30px;
+  border: 1px solid var(--border-color);
+  border-radius: 3px;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.button:hover {
+  background-color: #eee;
+}
+
+.result {
+  border: 1px solid red;
+}

styles/style.module.css

@@ -17,12 +17,13 @@
 
 .h1 {
   margin-bottom: 10px;
-  font-size: clamp(1.45rem, 2vw, 2.5rem);
+  font-size: clamp(1.45rem, 3vw, 2.25rem);
+  font-weight: normal;
 }
 
 .h2 {
   margin-bottom: 10px;
-  font-size: clamp(1.35rem, 1.4vw, 1.65rem);
+  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
 }
 
 .list {