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/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}
/>
</>
)
);
}