72 lines
2.6 KiB
TypeScript
72 lines
2.6 KiB
TypeScript
|
// app/admin/upload/_components/step-2-pdf-viewer.tsx
|
||
|
|
"use client";
|
||
|
|
|
||
|
|
import { usePdfViewer } from "../_hooks/use-pdf-viewer";
|
||
|
|
import { Button } from "@/shared/components/ui/button";
|
||
|
|
import { Checkbox } from "@/shared/components/ui/checkbox";
|
||
|
|
import { Loader2 } from "lucide-react";
|
||
|
|
import { motion } from "framer-motion";
|
||
|
|
|
||
|
|
export default function StepPdfViewer() {
|
||
|
|
const { pages, loading, localSelectedPages, toggleSelectPage, handleProcessPdf } = usePdfViewer();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex h-full gap-4">
|
||
|
|
{/* Sidebar Kiri */}
|
||
|
|
<div className="w-64 border-r pr-4 overflow-y-auto">
|
||
|
|
<h2 className="font-semibold mb-4">Pilih Halaman</h2>
|
||
|
|
<div className="space-y-2">
|
||
|
|
{pages.map((p) => (
|
||
|
|
<div
|
||
|
|
key={p.pageNum}
|
||
|
|
className={`flex items-center space-x-2 p-2 rounded cursor-pointer ${
|
||
|
|
localSelectedPages.includes(p.pageNum) ? "bg-blue-50" : "hover:bg-gray-50"
|
||
|
|
}`}
|
||
|
|
onClick={() => toggleSelectPage(p.pageNum)}
|
||
|
|
>
|
||
|
|
<Checkbox
|
||
|
|
checked={localSelectedPages.includes(p.pageNum)}
|
||
|
|
onCheckedChange={() => toggleSelectPage(p.pageNum)}
|
||
|
|
/>
|
||
|
|
<span className="text-sm">Halaman {p.pageNum}</span>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<div className="mt-4 pt-4 border-t sticky bottom-0 bg-white">
|
||
|
|
<Button
|
||
|
|
className="w-full"
|
||
|
|
onClick={handleProcessPdf}
|
||
|
|
disabled={loading || localSelectedPages.length === 0}
|
||
|
|
>
|
||
|
|
{loading ? <Loader2 className="animate-spin mr-2" /> : null}
|
||
|
|
Proses Halaman
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Main Content (Preview Images) */}
|
||
|
|
<div className="flex-1 overflow-y-auto bg-gray-100 p-4 rounded-lg">
|
||
|
|
{loading && pages.length === 0 && (
|
||
|
|
<div className="flex justify-center items-center h-full">
|
||
|
|
<Loader2 className="animate-spin h-8 w-8 text-blue-500" />
|
||
|
|
<span className="ml-2">Merender PDF...</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div className="space-y-6">
|
||
|
|
{pages.map((p) => (
|
||
|
|
<motion.div
|
||
|
|
key={p.pageNum}
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
className="bg-white p-2 shadow rounded"
|
||
|
|
>
|
||
|
|
<img src={p.imageUrl} alt={`Page ${p.pageNum}`} className="w-full h-auto" />
|
||
|
|
<p className="text-center text-xs text-gray-500 mt-2">Halaman {p.pageNum}</p>
|
||
|
|
</motion.div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|