ボタンをコンポーネント化し、URLリンクを追加

lib/constants.ts

@@ -2,3 +2,7 @@ export const SITE_NAME = "First Contributions JA";
 export const SITE_URL = "https://first-contributions-ja.github.io/";
 export const SITE_DESC =
   "Git/Githubの実践的な使い方やオープンソースでコラボレーションする作法を学ぶための日本語のチュートリアルです！";
+export const GITHUB_URL =
+  "https://github.com/first-contributions-ja/first-contributions-ja.github.io";
+export const TWITTER_SHARE =
+  "https://twitter.com/intent/tweet?text=完全日本語のチュートリアルで、OSS活動を始める🚀&url=https://github.com/first-contributions-ja/first-contributions-ja.github.io&hashtags=プログラミング";

src/app/page.tsx

@@ -1,9 +1,8 @@
-import Image from "next/image";
 import { basePath } from "../../next.config";
 export const BASE_PATH = basePath ? basePath : "";
 import GitHubIcon from "@mui/icons-material/GitHub";
 import ShareIcon from "@mui/icons-material/Share";
-import { SITE_NAME } from "../../lib/constants";
+import { TWITTER_SHARE } from "../../lib/constants";
 import KeyboardDoubleArrowDownSharpIcon from "@mui/icons-material/KeyboardDoubleArrowDownSharp";
 import GradientBackground from "@/components/gradient-background";
 import ScreenEmojis from "@/components/screen-emojis";
@@ -14,9 +13,9 @@ import {
   groupContributorsBySection,
   latestContributorsColor,
 } from "@/utils/contributors-grouping";
+import Button from "@/components/ui/button";
 
 export default function Home() {
-  const contributorsNumber = contributors.length;
   const contributorsGroups = groupContributorsBySection(contributors, 3);
 
   return (
@@ -40,14 +39,14 @@ export default function Home() {
             </p>
 
             <div className="mt-8 flex flex-col items-start gap-4 lg:mt-12 lg:flex-row">
-              <button className="flex h-12 w-40 items-center justify-center gap-2 rounded-full bg-red-600 px-4 text-center text-white duration-300 hover:opacity-60">
+              <Button>
                 <GitHubIcon className="text-2xl" />
                 GitHub
-              </button>
-              <button className="flex h-12 w-40 items-center justify-center gap-2 rounded-full border border-stone-800 bg-white px-4 text-red-600 duration-300 hover:opacity-60">
+              </Button>
+              <Button type="outline" href={TWITTER_SHARE}>
                 <ShareIcon className="text-2xl" />
                 Share
-              </button>
+              </Button>
             </div>
           </div>
         </div>

src/components/ui/button.tsx

@@ -0,0 +1,29 @@
+import { GITHUB_URL } from "../../../lib/constants";
+
+interface ButtonProps {
+  type?: "primary" | "outline";
+  href?: string;
+  children: React.ReactNode;
+}
+
+const PRIMARY_BUTTON_CLASS =
+  "flex h-12 w-40 items-center justify-center gap-2 rounded-full bg-red-600 px-4 text-center text-white duration-300 hover:opacity-60";
+const OUTLINE_BUTTON_CLASS =
+  "flex h-12 w-40 items-center justify-center gap-2 rounded-full border border-stone-800 bg-white px-4 text-red-600 duration-300 hover:opacity-60";
+
+const Button: React.FC<ButtonProps> = ({
+  type = "primary",
+  href = GITHUB_URL,
+  children,
+}) => {
+  const buttonClass =
+    type === "primary" ? PRIMARY_BUTTON_CLASS : OUTLINE_BUTTON_CLASS;
+
+  return (
+    <a href={href} target="_blank" rel="noopener" className={buttonClass}>
+      {children}
+    </a>
+  );
+};
+
+export default Button;