adding header

package.json

@@ -22,6 +22,7 @@
     "postcss": "^8.4.21",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "swr": "^2.1.0",
     "tailwindcss": "^3.2.7",
     "typescript": "5.0.2"
   }

src/components/Header.tsx

@@ -0,0 +1,24 @@
+import StarGazers from "./StarGazers";
+
+export default function Header() {
+    return (
+        <header
+        className="h-[110px] sm:!h-[144px] w-full bg-cover bg-no-repeat relative"
+        style={{
+          backgroundImage: "url(/header_bg.svg)",
+        }}
+      >
+        <div className="rainfall w-full h-full absolute" />
+        <nav className="w-11/12 h-24 max-w-5xl mx-auto flex items-center justify-between relative">
+          <a href="/">
+            <img
+              src="/logo.svg"
+              alt="Deno Logo"
+              className="h-14 w-14"
+            />
+          </a>
+          <StarGazers />
+        </nav>
+      </header>
+    )
+}

src/components/StarGazers.tsx

@@ -0,0 +1,42 @@
+import IconGithub from "./IconGithub"
+import useSWR from "swr"
+
+export interface GithubData {
+    watchers: number
+  }
+
+async function githubApiFetcher(): Promise<GithubData> {
+  const res = await fetch("https://api.github.com/repos/kodadot/nft-gallery");
+  return await res.json();
+}
+
+export function useStargazers() {
+    return useSWR<GithubData, Error>("watchers", githubApiFetcher);
+  }
+
+export default function StarGazers() {
+    const { data, error } = useStargazers();
+
+    const add = () => {
+      const url = `https://github.com/kodadot/nft-gallery/`;
+      window.open(url, '_blank')
+    };
+
+    if (error) {
+      return <div>Error: {error.message}</div>;
+    }
+
+
+    return (
+        <div>
+        <button
+          onClick={add}
+          className="flex items-center gap-2 border-2 border-gray-800 rounded-full px-5 py-1 font-semibold text-gray-800 hover:bg-gray-800 hover:text-white transition-colors duration-300"
+        >
+          <IconGithub />
+          {data?.watchers ?? "0"}
+        </button>
+
+      </div>
+    )
+}

src/pages/index.tsx

@@ -6,6 +6,7 @@ import { InferGetStaticPropsType } from 'next'
 import ProductCard from '@/components/ProductCard'
 
 import { extendFields, getClient } from '@kodadot1/uniquery'
+import Header from '@/components/Header'
 
 interface Metadata {
   name: string;
@@ -77,6 +78,7 @@ export default function Home({ items }: InferGetStaticPropsType<typeof getStatic
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
+      <Header />
       <main className={styles.main}>
       <div
         className="w-11/12 max-w-5xl mx-auto mt-28"

yarn.lock

@@ -2275,6 +2275,13 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+swr@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-2.1.0.tgz#10245d5a50f6d5d208ea9278f76839ab3058d5b8"
+  integrity sha512-4hYl5p3/KalQ1MORealM79g/DtLohmud6yyfXw5l4wjtFksYUnocRFudvyaoUtgj3FrVNK9lS25Av9dsZYvz0g==
+  dependencies:
+    use-sync-external-store "^1.2.0"
+
 synckit@^0.8.4:
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.8.5.tgz#b7f4358f9bb559437f9f167eb6bc46b3c9818fa3"
@@ -2432,6 +2439,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+use-sync-external-store@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"