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

wip

Browse Source
This commit is contained in:
Riccardo Giorato
2025-12-26 13:39:18 +01:00
parent a2dd20ccdb
commit 9f4dd15395
2 changed files with 29 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/editor/comic-canvas.tsx
+18 -15
View File
@@ -1,19 +1,19 @@
"use client" "use client";
import { RefreshCw, Download } from "lucide-react" import { RefreshCw, Download } from "lucide-react";
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button";
interface PageData { interface PageData {
id: number id: number;
title: string title: string;
image: string image: string;
prompt: string prompt: string;
characterUpload?: string characterUpload?: string;
style: string style: string;
} }
interface ComicCanvasProps { interface ComicCanvasProps {
page: PageData page: PageData;
} }
export function ComicCanvas({ page }: ComicCanvasProps) { export function ComicCanvas({ page }: ComicCanvasProps) {
@@ -23,8 +23,11 @@ export function ComicCanvas({ page }: ComicCanvasProps) {
<div className="absolute inset-0 dot-grid opacity-20" /> <div className="absolute inset-0 dot-grid opacity-20" />
<div className="relative z-10 w-full max-w-xl"> <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
<div className="w-full border-4 border-black overflow-hidden relative aspect-3/4"> className="bg-white w-full p-3 shadow-2xl rounded-sm mx-auto group"
style={{ maxWidth: "512px" }}
>
<div className="w-full border-4 border-black overflow-hidden relative aspect-3/4">
<div className="w-full h-full bg-neutral-900"> <div className="w-full h-full bg-neutral-900">
<img <img
src={page.image || "/placeholder.svg"} src={page.image || "/placeholder.svg"}
@@ -35,14 +38,14 @@ export function ComicCanvas({ page }: ComicCanvasProps) {
<div className="scan-line opacity-30" /> <div className="scan-line opacity-30" />
{/* Page label */} {/* Page label */}
<div className="absolute top-2 left-2 px-1.5 py-0.5 bg-black/70 text-[9px] text-white font-mono uppercase tracking-widest border border-white/10"> <div className="absolute top-2 left-2 px-1.5 py-0.5 bg-black/70 text-[9px] text-white font-mono uppercase tracking-widest border border-white/10 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
Page {page.id} Page {page.id}
</div> </div>
</div> </div>
</div> </div>
<div className="flex flex-col items-center gap-3 mt-4"> <div className="flex flex-col items-center gap-3 mt-4">
<div className="text-xs text-muted-foreground">Page {page.id}</div> {/* <div className="text-xs text-muted-foreground">Page {page.id}</div> */}
{/* Mobile action buttons */} {/* Mobile action buttons */}
<div className="flex items-center gap-2 md:hidden"> <div className="flex items-center gap-2 md:hidden">
@@ -65,5 +68,5 @@ export function ComicCanvas({ page }: ComicCanvasProps) {
</div> </div>
</div> </div>
</main> </main>
) );
} }
components/editor/page-sidebar.tsx
+11 -8
View File
@@ -1,7 +1,8 @@
"use client" "use client"
import { Plus, Loader2, Key, User } from "lucide-react" import { Plus, Loader2, Key } from "lucide-react"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { UserButton } from "@clerk/nextjs"
interface PageData { interface PageData {
id: number id: number
@@ -75,13 +76,15 @@ export function PageSidebar({
<Key className="w-4 h-4" /> <Key className="w-4 h-4" />
</Button> </Button>
{/* Avatar Circle - placeholder for future Clerk integration */} <div className="w-9 h-9 glass-panel glass-panel-hover rounded-md flex items-center justify-center text-muted-foreground hover:text-white transition-colors">
<button <UserButton
className="w-9 h-9 glass-panel rounded-full flex items-center justify-center text-muted-foreground hover:text-white transition-colors" appearance={{
title="User Profile (Coming Soon)" elements: {
> avatarBox: "w-full h-full rounded-md",
<User className="w-4 h-4" /> },
</button> }}
/>
</div>
</div> </div>
</aside> </aside>
) )