関数からコンポーネントへ

.gitignore

@@ -9,6 +9,7 @@
 !.yarn/plugins
 !.yarn/releases
 !.yarn/versions
+package-lock.json
 
 # testing
 /coverage

src/app/page.tsx

@@ -1,4 +1,4 @@
-import Link from "next/link";
+import { GithubButton, BookButton } from "@/components/ui/buttons";
 
 async function getOrgData() {
     const res = await fetch(`https://api.github.com/orgs/Syobosetsu-Proj`, {
@@ -15,35 +15,6 @@ async function getOrgData() {
     return res.json();
 }
 
-export function GithubButton(sublink: string) {
-    return (
-        <a
-            href={`https://github.com/${sublink}`}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="mt-10 py-1.5 px-4 inline-flex items-center justify-center gap-2 transition-colors bg-neutral-800 active:bg-neutral-950 font-medium border-neutral-900 text-white rounded-lg hover:bg-neutral-900 disabled:opacity-50"
-        >
-            <img src="/icons/github.svg" alt="GitHub" className="w-5 h-5 filter invert" />
-
-            <span>GitHub</span>
-        </a>
-    );
-}
-
-export function BookButton(link: string, text: string) {
-    return (
-        <Link
-            href={link}
-            rel="noopener noreferrer"
-            className="mt-10 py-1.5 px-4 inline-flex items-center justify-center gap-2 transition-colors bg-green-800 active:bg-green-950 font-medium border-green-900 text-white rounded-lg hover:bg-green-900 disabled:opacity-50"
-        >
-            <img src="/icons/book.svg" alt="GitHub" className="w-5 h-5 filter invert" />
-
-            <span>{text}</span>
-        </Link>
-    );
-}
-
 export default async function Home() {
     const org = await getOrgData();
 
@@ -60,8 +31,8 @@ export default async function Home() {
                         </div>
 
                         <div className="flex gap-4 mt-10">
-                            {GithubButton("Syobosetsu-Proj")}
-                            {BookButton("blog", "Blog")}
+                            <GithubButton sublink="Syobosetsu-Proj" />
+                            <BookButton link="blog">Blog</BookButton>
                         </div>
                     </div>
                 </div>

src/components/ui/buttons.tsx

@@ -0,0 +1,29 @@
+import Link from "next/link";
+
+export function GithubButton({ sublink }: { sublink: string }) {
+    return (
+        <a
+            href={`https://github.com/${sublink}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="mt-10 py-1.5 px-4 inline-flex items-center justify-center gap-2 transition-colors bg-neutral-800 active:bg-neutral-950 font-medium border-neutral-900 text-white rounded-lg hover:bg-neutral-900 disabled:opacity-50"
+        >
+            <img src="/icons/github.svg" alt="GitHub" className="w-5 h-5 filter invert" />
+
+            <span>GitHub</span>
+        </a>
+    );
+}
+
+export function BookButton({ link, children }: { link: string, children: React.ReactNode }) {
+    return (
+        <Link
+            href={link}
+            className="mt-10 py-1.5 px-4 inline-flex items-center justify-center gap-2 transition-colors bg-green-800 active:bg-green-950 font-medium border-green-900 text-white rounded-lg hover:bg-green-900 disabled:opacity-50"
+        >
+            <img src="/icons/book.svg" alt="Book" className="w-5 h-5 filter invert" />
+
+            <span>{children}</span>
+        </Link>
+    );
+}