Merge pull request #100 from first-contributions-ja/feat/#33_add_header

pss-aileen · web-flow · commit 0f440d350af1 · 2024-03-24T18:13:13.000+08:00
ヘッダーの追加
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,8 +1,9 @@
 import type { Metadata } from "next";
+import { SITE_NAME, SITE_URL, SITE_DESC } from "../../lib/constants";
 import { Inter, Noto_Sans_JP } from "next/font/google";
 import "./globals.css";
 import Footer from "@/components/footer";
-import { SITE_NAME, SITE_URL, SITE_DESC } from "../../lib/constants";
+import Header from "@/components/header";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -42,8 +43,8 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="ja">
-      <body className={`${inter.variable} ${notojp.variable}`}>
-        <header>ヘッダー</header>
+      <body className={`${inter.variable} ${notojp.variable} `}>
+        <Header />
         {children}
         <Footer />
       </body>
diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -0,0 +1,16 @@
+import Link from "next/link";
+import { SITE_NAME } from "../../lib/constants";
+import GitHubIcon from '@mui/icons-material/GitHub';
+
+export default function Header() {
+  return (
+    <header className="py-6 backdrop-blur-sm fixed w-full">
+      <Link href="/">
+        <h1 className="inline text-red-600 text-xl font-bold ml-7 hover:opacity-70 transition">
+          <GitHubIcon fontSize="large" className="text-red-600 mr-4 -translate-y-0.5" />
+          {SITE_NAME}
+        </h1>
+      </Link>
+    </header>
+  );
+}
