From 62645297c87f315d23f9a83c7fbe01fd63c5d303 Mon Sep 17 00:00:00 2001 From: Riccardo Giorato Date: Mon, 22 Dec 2025 20:29:47 +0100 Subject: [PATCH] Update API key modal and footer links to use Together AI --- components/api-key-modal.tsx | 72 ++++++++++++++++++++--------------- components/landing/footer.tsx | 15 ++++---- components/landing/navbar.tsx | 50 +++++++++++++++--------- lib/utils.ts | 9 +++-- 4 files changed, 89 insertions(+), 57 deletions(-) diff --git a/components/api-key-modal.tsx b/components/api-key-modal.tsx index 99e835c..14e1eb3 100644 --- a/components/api-key-modal.tsx +++ b/components/api-key-modal.tsx @@ -1,43 +1,53 @@ -"use client" +"use client"; -import type React from "react" -import { useState, useEffect } from "react" -import { Key, ExternalLink, ArrowRight } from "lucide-react" -import { Button } from "@/components/ui/button" -import { Input } from "@/components/ui/input" -import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog" +import type React from "react"; +import { useState, useEffect } from "react"; +import { Key, ExternalLink, ArrowRight } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogDescription, +} from "@/components/ui/dialog"; +import { TOGETHER_LINK } from "@/lib/utils"; interface ApiKeyModalProps { - isOpen: boolean - onClose: () => void - onSubmit: (key: string) => void + isOpen: boolean; + onClose: () => void; + onSubmit: (key: string) => void; } export function ApiKeyModal({ isOpen, onClose, onSubmit }: ApiKeyModalProps) { - const [apiKey, setApiKey] = useState("") - const [isLoading, setIsLoading] = useState(false) - const [existingKey, setExistingKey] = useState(null) + const [apiKey, setApiKey] = useState(""); + const [isLoading, setIsLoading] = useState(false); + const [existingKey, setExistingKey] = useState(null); useEffect(() => { if (typeof window !== "undefined" && isOpen) { - const storedKey = localStorage.getItem("together_api_key") - setExistingKey(storedKey) - if (storedKey && apiKey === "") { - setApiKey(storedKey) - } + const storedKey = localStorage.getItem("together_api_key"); + setExistingKey(storedKey); + setApiKey((current) => { + if (storedKey && current === "") { + return storedKey; + } + return current; + }); } - }, [isOpen]) + }, [isOpen]); const handleSubmit = async (e: React.FormEvent) => { - e.preventDefault() - if (!apiKey.trim()) return + e.preventDefault(); + if (!apiKey.trim()) return; - setIsLoading(true) - await new Promise((resolve) => setTimeout(resolve, 500)) - setIsLoading(false) - onSubmit(apiKey.trim()) - setApiKey("") - } + setIsLoading(true); + await new Promise((resolve) => setTimeout(resolve, 500)); + setIsLoading(false); + onSubmit(apiKey.trim()); + setApiKey(""); + }; return ( @@ -50,7 +60,9 @@ export function ApiKeyModal({ isOpen, onClose, onSubmit }: ApiKeyModalProps) { - {existingKey ? "Update your API key" : "Add your API key to continue"} + {existingKey + ? "Update your API key" + : "Add your API key to continue"} @@ -70,7 +82,7 @@ export function ApiKeyModal({ isOpen, onClose, onSubmit }: ApiKeyModalProps) { /> - ) + ); } diff --git a/components/landing/footer.tsx b/components/landing/footer.tsx index 2bfe34d..a5abcff 100644 --- a/components/landing/footer.tsx +++ b/components/landing/footer.tsx @@ -1,12 +1,13 @@ -import { Github } from "lucide-react" -import Link from "next/link" +import { TOGETHER_LINK } from "@/lib/utils"; +import { Github } from "lucide-react"; +import Link from "next/link"; function XIcon({ className }: { className?: string }) { return ( - ) + ); } export function Footer() { @@ -16,7 +17,7 @@ export function Footer() { Made & powered by{" "}
- ) + ); } diff --git a/components/landing/navbar.tsx b/components/landing/navbar.tsx index 4c018df..d702afb 100644 --- a/components/landing/navbar.tsx +++ b/components/landing/navbar.tsx @@ -1,26 +1,32 @@ -"use client" +"use client"; -import { useState } from "react" -import { Github, Key } from "lucide-react" -import Link from "next/link" -import { ApiKeyModal } from "@/components/api-key-modal" +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 [showApiModal, setShowApiModal] = useState(false); const handleApiKeySubmit = (key: string) => { - localStorage.setItem("together_api_key", key) - setShowApiModal(false) - } + localStorage.setItem("together_api_key", key); + setShowApiModal(false); + }; return ( <> - setShowApiModal(false)} onSubmit={handleApiKeySubmit} /> + setShowApiModal(false)} + onSubmit={handleApiKeySubmit} + /> - ) + ); } diff --git a/lib/utils.ts b/lib/utils.ts index fed2fe9..df18e5a 100644 --- a/lib/utils.ts +++ b/lib/utils.ts @@ -1,6 +1,9 @@ -import { clsx, type ClassValue } from 'clsx' -import { twMerge } from 'tailwind-merge' +import { clsx, type ClassValue } from "clsx"; +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";