ヘッダーコンポーネントの作成

Author: rintaro29

public/images/rcc-favicon.png

@@ -0,0 +1,32 @@
+import Image from "next/image";
+import Link from "next/link";
+
+const Header = () => {
+  return (
+    <header className=" bg-slate-50 p-2 text-black opacity-90 shadow-sm">
+      <div className="container mx-auto flex items-center justify-between">
+        <div className="flex w-full items-center justify-center">
+          <Image src="/images/rcc-favicon.png" alt="RCCのfaviconです" width={40} height={40} className="mr-5" />
+          <h1 className="text-xl font-semibold ">
+            <Link href="/">Snack</Link>
+          </h1>
+        </div>
+
+        {/* <nav>
+          <ul className="flex space-x-4">
+            <>
+              <Link href="/login" className="bg-white text-gray-900 py-2 px-3 rounded-lg font-medium">
+                ログイン
+              </Link>
+              <Link href="/signup" className="bg-white text-gray-900 py-2 px-3 rounded-lg font-medium">
+                サインアップ
+              </Link>
+            </>
+          </ul>
+        </nav> */}
+      </div>
+    </header>
+  );
+};
+
+export default Header;

src/components/Header.tsx

@@ -1,6 +1,17 @@
-import '@/styles/globals.css'
-import type { AppProps } from 'next/app'
+import Header from "@/components/Header";
+import "@/styles/globals.css";
+import type { AppProps } from "next/app";
+import { useState } from "react";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return (
+    <div className="flex h-full w-full flex-col ">
+      <div className="sticky top-0 z-10">
+        <Header />
+      </div>
+      <div className=" hide-scrollbar h-full overflow-y-auto ">
+        <Component {...pageProps} />
+      </div>
+    </div>
+  );
 }