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

Add Clerk authentication and update auth flow for stories and API routes

Browse Source
This commit is contained in:
Riccardo Giorato
2025-12-25 14:17:32 +01:00
parent bbe8c8caf8
commit 8bc68eb102
10 changed files with 308 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/editor/comic-canvas.tsx
+2 -2
View File
@@ -24,12 +24,12 @@ export function ComicCanvas({ page }: ComicCanvasProps) {
<div className="relative z-10 w-full max-w-xl">
<div className="bg-white w-full p-3 shadow-2xl rounded-sm mx-auto" style={{ maxWidth: "512px" }}>
<div className="w-full border-4 border-black overflow-hidden relative aspect-[3/4]">
<div className="w-full border-4 border-black overflow-hidden relative aspect-3/4">
<div className="w-full h-full bg-neutral-900">
<img
src={page.image || "/placeholder.svg"}
alt={`Page ${page.id}`}
className="w-full h-full object-cover opacity-90 grayscale-[10%] contrast-110"
className="w-full h-full object-cover opacity-90 grayscale-10 contrast-110"
/>
</div>
<div className="scan-line opacity-30" />
components/landing/navbar.tsx
+26 -10
View File
@@ -1,9 +1,16 @@
"use client";
import { useState } from "react";
import { Github, Key } from "lucide-react";
import { Github, Key, User } from "lucide-react";
import Link from "next/link";
import { ApiKeyModal } from "@/components/api-key-modal";
import {
SignInButton,
SignUpButton,
SignedIn,
SignedOut,
UserButton,
} from "@clerk/nextjs";
export function Navbar() {
const [showApiModal, setShowApiModal] = useState(false);
@@ -32,7 +39,7 @@ export function Navbar() {
<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 glass-panel glass-panel-hover transition-all text-xs rounded-md"
className="flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1.5 glass-panel glass-panel-hover transition-all text-xs rounded-md cursor-pointer"
>
<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">
@@ -52,14 +59,23 @@ export function Navbar() {
</span>
</Link>
<Link
href="/signup"
className="flex items-center gap-2 px-2.5 sm:px-3 py-1.5 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>
<SignedOut>
<SignInButton mode="modal">
<button className="flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1.5 glass-panel glass-panel-hover transition-all text-xs rounded-md cursor-pointer">
<span className="text-muted-foreground text-xs sm:text-sm hidden sm:inline tracking-tight">
Sign In
</span>
</button>
</SignInButton>
</SignedOut>
<SignedIn>
<button className="flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1.5 glass-panel glass-panel-hover transition-all text-xs rounded-md cursor-pointer">
<User 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">
My Stories
</span>
</button>
</SignedIn>
</div>
</nav>