From b135aac8531c1e1488147ad8c6f98eddbdbe0c99 Mon Sep 17 00:00:00 2001
From: HsiangNianian <admin@jyunko.cn>
Date: Mon, 17 Apr 2023 18:53:55 +0000
Subject: Initial commit

Created from https://vercel.com/new
---
 app/header.tsx | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 app/header.tsx

(limited to 'app/header.tsx')

diff --git a/app/header.tsx b/app/header.tsx
new file mode 100644
index 0000000..872459a
--- /dev/null
+++ b/app/header.tsx
@@ -0,0 +1,60 @@
+"use client";
+import React from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+const navigation = [
+  {
+    name: "Share",
+    href: "/share",
+  },
+  {
+    name: "Unseal",
+    href: "/unseal",
+  },
+
+  {
+    name: "Deploy",
+    href: "/deploy",
+  },
+  {
+    name: "GitHub",
+    href: "https://github.com/chronark/envshare",
+    external: true,
+  },
+] satisfies { name: string; href: string; external?: boolean }[];
+
+export const Header: React.FC = () => {
+  const pathname = usePathname();
+  return (
+    <header className="top-0 z-30 w-full px-4 sm:fixed backdrop-blur bh-zinc-900/50">
+      <div className="container mx-auto">
+        <div className="flex flex-col items-center justify-between gap-2 pt-6 sm:h-20 sm:flex-row sm:pt-0">
+          <Link href="/" className="text-2xl font-semibold duration-150 text-zinc-100 hover:text-white">
+            EnvShare
+          </Link>
+          {/* Desktop navigation */}
+          <nav className="flex items-center grow">
+            <ul className="flex flex-wrap items-center justify-end gap-4 grow">
+              {navigation.map((item) => (
+                <li className="" key={item.href}>
+                  <Link
+                    className={`flex items-center px-3 py-2 duration-150 text-sm sm:text-base  hover:text-zinc-50
+                    ${pathname === item.href ? "text-zinc-200" : "text-zinc-400"}`}
+                    href={item.href}
+                    target={item.external ? "_blank" : undefined}
+                    rel={item.external ? "noopener noreferrer" : undefined}
+                  >
+                    {item.name}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </div>
+      </div>
+
+      {/* Fancy fading bottom border */}
+    </header>
+  );
+};
-- 
cgit v1.2.3-70-g09d2