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

Add ownership checks and share functionality to story editor

Browse Source
This commit is contained in:
Riccardo Giorato
2025-12-26 21:02:36 +01:00
parent 5917508175
commit 0ff8a4e685
5 changed files with 188 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/editor/page-sidebar.tsx
+42 -34
View File
@@ -1,25 +1,26 @@
"use client"
"use client";
import { Plus, Loader2, Key } from "lucide-react"
import { Button } from "@/components/ui/button"
import { UserButton } from "@clerk/nextjs"
import { Plus, Loader2, Key } from "lucide-react";
import { Button } from "@/components/ui/button";
import { UserButton, SignedIn } from "@clerk/nextjs";
interface PageData {
id: number
title: string
image: string
prompt: string
characterUpload?: string
style: string
id: number;
title: string;
image: string;
prompt: string;
characterUpload?: string;
style: string;
}
interface PageSidebarProps {
pages: PageData[]
currentPage: number
onPageSelect: (index: number) => void
onAddPage: () => void
loadingPageId?: number | null
onApiKeyClick?: () => void
pages: PageData[];
currentPage: number;
onPageSelect: (index: number) => void;
onAddPage: () => void;
loadingPageId?: number | null;
onApiKeyClick?: () => void;
isOwner?: boolean;
}
export function PageSidebar({
@@ -29,6 +30,7 @@ export function PageSidebar({
onAddPage,
loadingPageId,
onApiKeyClick,
isOwner = true,
}: PageSidebarProps) {
return (
<aside className="w-20 md:w-24 border-r border-border/50 bg-background/50 flex flex-col items-center py-4 gap-2 justify-between">
@@ -60,14 +62,16 @@ export function PageSidebar({
alt={`Page ${index + 1}`}
className="w-full h-full object-cover"
/>
<div className={`
<div
className={`
absolute bottom-1 left-1 px-1.5 py-0.5 rounded text-[10px] font-medium tracking-tight
${
currentPage === index
? "bg-indigo text-white"
: "bg-black/70 text-white"
}
`}>
`}
>
{index + 1}
</div>
</>
@@ -75,12 +79,14 @@ export function PageSidebar({
</button>
))}
<button
onClick={onAddPage}
className="w-16 h-16 rounded-lg border-2 border-dashed border-border/50 hover:border-indigo/50 bg-background/50 hover:bg-background/80 transition-all group flex items-center justify-center"
>
<Plus className="w-6 h-6 text-muted-foreground group-hover:text-indigo transition-transform group-hover:scale-110" />
</button>
{isOwner && (
<button
onClick={onAddPage}
className="w-16 h-16 rounded-lg border-2 border-dashed border-border/50 hover:border-indigo/50 bg-background/50 hover:bg-background/80 transition-all group flex items-center justify-center"
>
<Plus className="w-6 h-6 text-muted-foreground group-hover:text-indigo transition-transform group-hover:scale-110" />
</button>
)}
</div>
<div className="flex flex-col items-center gap-3">
@@ -95,16 +101,18 @@ export function PageSidebar({
<Key className="w-4 h-4" />
</Button>
<div className="w-10 h-10 glass-panel glass-panel-hover rounded-md flex items-center justify-center text-muted-foreground hover:text-white transition-colors">
<UserButton
appearance={{
elements: {
avatarBox: "w-full h-full rounded-md",
},
}}
/>
</div>
<SignedIn>
<div className="w-10 h-10 glass-panel glass-panel-hover rounded-md flex items-center justify-center text-muted-foreground hover:text-white transition-colors">
<UserButton
appearance={{
elements: {
avatarBox: "w-full h-full rounded-md",
},
}}
/>
</div>
</SignedIn>
</div>
</aside>
)
);
}