3dtours/make-comics
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update API key modal and footer links to use Together AI

Browse Source
This commit is contained in:
Riccardo Giorato
2025-12-22 20:29:47 +01:00
parent 3731e3f476
commit 62645297c8
4 changed files with 89 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/api-key-modal.tsx
+41 -29
View File
@@ -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<string | null>(null)
const [apiKey, setApiKey] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [existingKey, setExistingKey] = useState<string | null>(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 (
<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
+8 -7
View File
@@ -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 (
<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
+33 -17
View File
@@ -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 (
<>
<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
+6 -3
View File
@@ -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";