initial commit with Youssef work

2025-12-22 20:20:39 +01:00
parent c0228d67d0
commit 3731e3f476
106 changed files with 12531 additions and 1 deletions
@@ -0,0 +1,57 @@
+"use client"
+
+import { useState } from "react"
+import { Github, Key } from "lucide-react"
+import Link from "next/link"
+import { ApiKeyModal } from "@/components/api-key-modal"
+
+export function Navbar() {
+  const [showApiModal, setShowApiModal] = useState(false)
+
+  const handleApiKeySubmit = (key: string) => {
+    localStorage.setItem("together_api_key", key)
+    setShowApiModal(false)
+  }
+
+  return (
+    <>
+      <nav className="w-full h-14 sm:h-16 border-b border-border/50 flex items-center justify-between px-4 sm:px-6 lg:px-8 z-50 bg-background/80 backdrop-blur-md">
+        <div className="flex items-center gap-1">
+          <div className="w-8 h-8 sm:w-10 sm:h-10 flex items-center justify-center">
+            <img src="/images/makecomics-logo.png" alt="MakeComics Logo" className="w-full h-full object-contain" />
+          </div>
+          <span className="text-white font-heading tracking-[0.005em] text-lg sm:text-xl">MakeComics</span>
+        </div>
+
+        <div className="flex items-center gap-2 sm:gap-3">
+          <button
+            onClick={() => setShowApiModal(true)}
+            className="flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1.5 rounded glass-panel glass-panel-hover transition-all text-xs rounded-md"
+          >
+            <Key className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+            <span className="text-muted-foreground text-xs sm:text-sm hidden sm:inline tracking-tight">API Key</span>
+          </button>
+
+          <Link
+            href="https://github.com/makecomics/makecomics"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1.5 rounded glass-panel glass-panel-hover transition-all text-xs rounded-md"
+          >
+            <Github className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+            <span className="text-muted-foreground text-xs sm:text-sm hidden sm:inline">0</span>
+          </Link>
+
+          <Link
+            href="/signup"
+            className="flex items-center gap-2 px-2.5 sm:px-3 py-1.5 rounded glass-panel glass-panel-hover transition-all text-xs rounded-md"
+          >
+            <span className="text-foreground text-xs sm:text-sm tracking-[-0.01em] font-normal">Sign up</span>
+          </Link>
+        </div>
+      </nav>
+
+      <ApiKeyModal isOpen={showApiModal} onClose={() => setShowApiModal(false)} onSubmit={handleApiKeySubmit} />
+    </>
+  )
+}