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

Add page navigation buttons and update info button text for mobile and d

Browse Source
This commit is contained in:
Riccardo Giorato
2025-12-27 12:12:51 +01:00
parent 8730b1053b
commit cb00498df1
1 changed files with 46 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/editor/comic-canvas.tsx
+46 -28
View File
@@ -1,6 +1,6 @@
"use client"; "use client";
import { RefreshCw, Share, Info, Loader2, Trash2 } from "lucide-react"; import { RefreshCw, Share, Info, Loader2, Trash2, ChevronLeft, ChevronRight } from "lucide-react";
import { useToast } from "@/hooks/use-toast"; import { useToast } from "@/hooks/use-toast";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
@@ -81,18 +81,18 @@ export function ComicCanvas({
</div> </div>
</div> </div>
{/* Action buttons below the page image */} {/* Action buttons below the page image */}
<div className="hidden md:flex items-center justify-center gap-2 mt-4"> <div className="hidden md:flex items-center justify-center gap-2 mt-4">
{onInfoClick && ( {onInfoClick && (
<Button <Button
variant="ghost" variant="ghost"
size="icon" className="hover:bg-secondary text-muted-foreground hover:text-white gap-2 text-xs h-9 px-3"
className="hover:bg-secondary text-muted-foreground hover:text-white h-9 w-9" onClick={onInfoClick}
onClick={onInfoClick} >
> <Info className="w-4 h-4" />
<Info className="w-4 h-4" /> <span>Info (i)</span>
</Button> </Button>
)} )}
{isOwner && ( {isOwner && (
<Button <Button
@@ -123,22 +123,40 @@ export function ComicCanvas({
</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 md:hidden"> <div className="flex items-center gap-2 text-xs text-muted-foreground md:hidden">
Page {pageIndex + 1} of {totalPages} <Button
</div> variant="ghost"
size="icon"
className="h-6 w-6 hover:bg-secondary text-muted-foreground hover:text-white"
onClick={onPrevPage}
disabled={pageIndex === 0}
>
<ChevronLeft className="w-3 h-3" />
</Button>
<span>Page {pageIndex + 1} of {totalPages}</span>
<Button
variant="ghost"
size="icon"
className="h-6 w-6 hover:bg-secondary text-muted-foreground hover:text-white"
onClick={onNextPage}
disabled={pageIndex === totalPages - 1}
>
<ChevronRight className="w-3 h-3" />
</Button>
</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">
{onInfoClick && ( {onInfoClick && (
<Button <Button
variant="ghost" variant="ghost"
size="icon" className="hover:bg-secondary text-muted-foreground hover:text-white gap-2 text-xs h-9 px-3"
className="hover:bg-secondary text-muted-foreground hover:text-white h-9 w-9" onClick={onInfoClick}
onClick={onInfoClick} >
> <Info className="w-4 h-4" />
<Info className="w-4 h-4" /> <span>Info (i)</span>
</Button> </Button>
)} )}
{isOwner && ( {isOwner && (
<Button <Button