From 4d99a1b70d528f23d891b7e9fee2769a87e7478f Mon Sep 17 00:00:00 2001
From: hayao <shun819.mail@gmail.com>
Date: Wed, 8 Nov 2023 23:32:17 +0900
Subject: [PATCH] Add: Wanted page

---
 src/options/components/Footer.tsx | 10 ++++--
 src/options/components/Main.tsx   |  2 ++
 src/options/pages/About.tsx       | 13 ++++++++
 src/options/pages/Thanks.tsx      |  8 ++---
 src/options/pages/Top.tsx         | 10 ++++++
 src/options/pages/Wanted.tsx      | 53 +++++++++++++++++++++++++++++++
 6 files changed, 90 insertions(+), 6 deletions(-)
 create mode 100644 src/options/pages/Wanted.tsx

diff --git a/src/options/components/Footer.tsx b/src/options/components/Footer.tsx
index d766741..d4ac51e 100644
--- a/src/options/components/Footer.tsx
+++ b/src/options/components/Footer.tsx
@@ -4,13 +4,19 @@ import { Link } from "react-router-dom";
 
 export default function Footer({ className }: { className?: string }) {
     return (
-        <footer className={classNames(className, "bg-neutral")}>
-            <DaisyFooter className="mx-auto w-2/3 py-5">
+        <footer className={classNames(className, "bg-neutral", "mt-3")}>
+            <DaisyFooter className="mx-auto w-2/3 py-2">
                 <div>
                     <DaisyFooter.Title>Links</DaisyFooter.Title>
                     <FooterLink href="/about" isInternal>
                         About
                     </FooterLink>
+                    <FooterLink href="/why" isInternal>
+                        Why I created it?
+                    </FooterLink>
+                    <FooterLink href="/wanted" isInternal>
+                        Wanted
+                    </FooterLink>
                     <FooterLink href="https://chromewebstore.google.com/detail/gaming-gunma-university/fifbnlkbedonackjjbegkjmekchdcfhk">
                         Chrome Web Store
                     </FooterLink>
diff --git a/src/options/components/Main.tsx b/src/options/components/Main.tsx
index e9116c9..cf4784d 100644
--- a/src/options/components/Main.tsx
+++ b/src/options/components/Main.tsx
@@ -5,6 +5,7 @@ import { Route, Routes } from "react-router-dom";
 import About from "../pages/About";
 import Thanks from "../pages/Thanks";
 import Top from "../pages/Top";
+import Wanted from "../pages/Wanted";
 import Why from "../pages/Why";
 import NotFound from "./404";
 
@@ -24,6 +25,7 @@ export default function Main(props: { className?: string }) {
                 <Route path="/about" Component={About} />
                 <Route path="/why" Component={Why} />
                 <Route path="/thanks" Component={Thanks} />
+                <Route path="/wanted" Component={Wanted} />
                 <Route path="*" Component={NotFound} />
             </Routes>
         </main>
diff --git a/src/options/pages/About.tsx b/src/options/pages/About.tsx
index fd85c37..ebef2e8 100644
--- a/src/options/pages/About.tsx
+++ b/src/options/pages/About.tsx
@@ -10,6 +10,19 @@ export default function About() {
             <Heading.h2>筆者について</Heading.h2>
             <p>ゲーミングうんたらと言って虹色に光るのが大嫌いな、群馬大学情報学部所属の伊藤 駿です。</p>
             <p>普段はTwitterでパソコンをかたかた弄って遊んでいます。もし大学内でお会いした際には是非仲良くしてください。</p>
+            <Heading.h2>筆者の連絡先</Heading.h2>
+            <ul>
+                <li>
+                    <a href="https://twitter.com/Hayao0819" className="link-info link">
+                        Twitter
+                    </a>
+                </li>
+                <li>
+                    <a href="https://instagram.com/Hayao0819" className="link-info link">
+                        Instagram
+                    </a>
+                </li>
+            </ul>
         </>
     );
 }
diff --git a/src/options/pages/Thanks.tsx b/src/options/pages/Thanks.tsx
index 1bab85d..04af4f0 100644
--- a/src/options/pages/Thanks.tsx
+++ b/src/options/pages/Thanks.tsx
@@ -27,10 +27,10 @@ export default function Thanks() {
             <p>使用技術はTypeScriptとReact、TailwindCSSです。</p>
             <p>
                 興味のある方は
-                <a href="https://twitter.com/Hayao0819" target="_blank" rel="noreferrer">
-                    TwitterのDM
-                </a>
-                までご連絡ください。
+                <Link to="/wanted" className="link-info link">
+                    こちら
+                </Link>
+                をご覧ください。
             </p>
         </>
     );
diff --git a/src/options/pages/Top.tsx b/src/options/pages/Top.tsx
index c9da471..8e0dda4 100644
--- a/src/options/pages/Top.tsx
+++ b/src/options/pages/Top.tsx
@@ -2,6 +2,7 @@ import classNames from "classnames";
 import { useEffect, useState } from "react";
 import { Tooltip } from "react-daisyui";
 import { FaGamepad, FaMoon } from "react-icons/fa";
+import { Link } from "react-router-dom";
 
 import StorageTool from "@/class/StorageTool";
 import CopyTootrip from "@/components/CopyBtn";
@@ -76,6 +77,15 @@ export default function Top() {
                     <button className="btn bg-base-300">shun819.mail@gmail.com</button>
                 </CopyTootrip>
             </ConfigSection>
+
+            <ConfigSection name="開発者募集">
+                <p>
+                    <Link to="/wanted" className="link-info link">
+                        こちら
+                    </Link>
+                    を御覧ください。
+                </p>
+            </ConfigSection>
         </>
     );
 }
diff --git a/src/options/pages/Wanted.tsx b/src/options/pages/Wanted.tsx
new file mode 100644
index 0000000..00bf9be
--- /dev/null
+++ b/src/options/pages/Wanted.tsx
@@ -0,0 +1,53 @@
+import { Link } from "react-router-dom";
+
+import Heading from "@/components/Heading";
+
+export default function Wanted() {
+    return (
+        <>
+            <Heading.h1>開発者募集</Heading.h1>
+            <p>
+                この拡張機能はGitHub上でMITライセンスの基で公開されており、現在Contributerを募集しています。
+                以下に技術的な概要を掲載しますので、興味のある方はぜひ
+                <Link to="/about" className="link-info link">
+                    開発者までご連絡
+                </Link>
+                ください。
+            </p>
+
+            <Heading.h2>概要</Heading.h2>
+            <p>群馬大学に所属しており、ウェブ技術に興味のある人。ラーメンが好きな人大歓迎です。</p>
+            <p>現開発者のお財布と気分次第で、報酬としてラーメンを奢るかもしれません。</p>
+
+            <Heading.h2>技術</Heading.h2>
+            <div className="flex child:mx-4">
+                <div>
+                    <p>現在使用しているもの</p>
+                    <ul>
+                        <li>core-js</li>
+                        <li>daisy UI with React</li>
+                        <li>eslint</li>
+                        <li>Node.js</li>
+                        <li>pnpm</li>
+                        <li>PostCSS</li>
+                        <li>Prettier</li>
+                        <li>React</li>
+                        <li>Sass</li>
+                        <li>Stylelint</li>
+                        <li>Tailwind CSS</li>
+                        <li>TypeScript</li>
+                        <li>Volta</li>
+                        <li>Webpack</li>
+                    </ul>
+                </div>
+                <div>
+                    <p>今後使用していきたいもの</p>
+                    <ul>
+                        <li>Deno</li>
+                        <li>TurboPack</li>
+                    </ul>
+                </div>
+            </div>
+        </>
+    );
+}