Update API key modal and footer links to use Together AI

components/api-key-modal.tsx

@@ -1,43 +1,53 @@
-"use client"
+"use client";
 
-import type React from "react"
+import type React from "react";
-import { useState, useEffect } from "react"
+import { useState, useEffect } from "react";
-import { Key, ExternalLink, ArrowRight } from "lucide-react"
+import { Key, ExternalLink, ArrowRight } from "lucide-react";
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input"
+import { Input } from "@/components/ui/input";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { TOGETHER_LINK } from "@/lib/utils";
 
 interface ApiKeyModalProps {
-  isOpen: boolean
+  isOpen: boolean;
-  onClose: () => void
+  onClose: () => void;
-  onSubmit: (key: string) => void
+  onSubmit: (key: string) => void;
 }
 
 export function ApiKeyModal({ isOpen, onClose, onSubmit }: ApiKeyModalProps) {
-  const [apiKey, setApiKey] = useState("")
+  const [apiKey, setApiKey] = useState("");
-  const [isLoading, setIsLoading] = useState(false)
+  const [isLoading, setIsLoading] = useState(false);
-  const [existingKey, setExistingKey] = useState<string | null>(null)
+  const [existingKey, setExistingKey] = useState<string | null>(null);
 
   useEffect(() => {
     if (typeof window !== "undefined" && isOpen) {
-      const storedKey = localStorage.getItem("together_api_key")
+      const storedKey = localStorage.getItem("together_api_key");
-      setExistingKey(storedKey)
+      setExistingKey(storedKey);
-      if (storedKey && apiKey === "") {
+      setApiKey((current) => {
-        setApiKey(storedKey)
+        if (storedKey && current === "") {
-      }
+          return storedKey;
+        }
+        return current;
+      });
     }
-  }, [isOpen])
+  }, [isOpen]);
 
   const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
+    e.preventDefault();
-    if (!apiKey.trim()) return
+    if (!apiKey.trim()) return;
 
-    setIsLoading(true)
+    setIsLoading(true);
-    await new Promise((resolve) => setTimeout(resolve, 500))
+    await new Promise((resolve) => setTimeout(resolve, 500));
-    setIsLoading(false)
+    setIsLoading(false);
-    onSubmit(apiKey.trim())
+    onSubmit(apiKey.trim());
-    setApiKey("")
+    setApiKey("");
-  }
+  };
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
@@ -50,7 +60,9 @@ export function ApiKeyModal({ isOpen, onClose, onSubmit }: ApiKeyModalProps) {
           </div>
 
           <DialogTitle className="text-xl text-center text-white">
-            {existingKey ? "Update your API key" : "Add your API key to continue"}
+            {existingKey
+              ? "Update your API key"
+              : "Add your API key to continue"}
           </DialogTitle>
 
           <DialogDescription className="text-center text-muted-foreground">
@@ -70,7 +82,7 @@ export function ApiKeyModal({ isOpen, onClose, onSubmit }: ApiKeyModalProps) {
           />
 
           <a
-            href="https://together.ai"
+            href={TOGETHER_LINK}
             target="_blank"
             rel="noopener noreferrer"
             className="text-sm text-indigo hover:text-indigo-light flex items-center gap-1.5 transition-colors"
@@ -106,5 +118,5 @@ export function ApiKeyModal({ isOpen, onClose, onSubmit }: ApiKeyModalProps) {
         </div>
       </DialogContent>
     </Dialog>
-  )
+  );
 }

components/landing/footer.tsx

@@ -1,12 +1,13 @@
-import { Github } from "lucide-react"
+import { TOGETHER_LINK } from "@/lib/utils";
-import Link from "next/link"
+import { Github } from "lucide-react";
+import Link from "next/link";
 
 function XIcon({ className }: { className?: string }) {
   return (
     <svg viewBox="0 0 24 24" fill="currentColor" className={className}>
       <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
     </svg>
-  )
+  );
 }
 
 export function Footer() {
@@ -16,7 +17,7 @@ export function Footer() {
         <span>
           Made & powered by{" "}
           <Link
-            href="https://together.ai"
+            href={TOGETHER_LINK}
             target="_blank"
             rel="noopener noreferrer"
             className="hover:text-white transition-colors text-white"
@@ -27,7 +28,7 @@ export function Footer() {
       </div>
       <div className="flex items-center gap-3">
         <Link
-          href="https://github.com/makecomics/makecomics"
+          href="https://github.com/nutlope/make-comics"
           target="_blank"
           rel="noopener noreferrer"
           className="hover:text-white transition-colors"
@@ -35,7 +36,7 @@ export function Footer() {
           <Github className="w-3.5 h-3.5" />
         </Link>
         <Link
-          href="https://x.com/makecomics"
+          href="https://x.com/nutlope"
           target="_blank"
           rel="noopener noreferrer"
           className="hover:text-white transition-colors"
@@ -44,5 +45,5 @@ export function Footer() {
         </Link>
       </div>
     </footer>
-  )
+  );
 }

components/landing/navbar.tsx

@@ -1,26 +1,32 @@
-"use client"
+"use client";
 
-import { useState } from "react"
+import { useState } from "react";
-import { Github, Key } from "lucide-react"
+import { Github, Key } from "lucide-react";
-import Link from "next/link"
+import Link from "next/link";
-import { ApiKeyModal } from "@/components/api-key-modal"
+import { ApiKeyModal } from "@/components/api-key-modal";
 
 export function Navbar() {
-  const [showApiModal, setShowApiModal] = useState(false)
+  const [showApiModal, setShowApiModal] = useState(false);
 
   const handleApiKeySubmit = (key: string) => {
-    localStorage.setItem("together_api_key", key)
+    localStorage.setItem("together_api_key", key);
-    setShowApiModal(false)
+    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" />
+            <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>
+          <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">
@@ -29,29 +35,39 @@ export function Navbar() {
             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>
+            <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"
+            href="https://github.com/nutlope/make-comics"
             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>
+            <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>
+            <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} />
+      <ApiKeyModal
+        isOpen={showApiModal}
+        onClose={() => setShowApiModal(false)}
+        onSubmit={handleApiKeySubmit}
+      />
     </>
-  )
+  );
 }

lib/utils.ts

@@ -1,6 +1,9 @@
-import { clsx, type ClassValue } from 'clsx'
+import { clsx, type ClassValue } from "clsx";
-import { twMerge } from 'tailwind-merge'
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
+
+export const TOGETHER_LINK =
+  "https://togetherai.link/?utm_source=make-comics&utm_medium=referral&utm_campaign=example-app";