94 lines
3.1 KiB
TypeScript
94 lines
3.1 KiB
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import Image from 'next/image';
|
||
|
|
import { CopyPlus, Trash2, Plus } from 'lucide-react';
|
||
|
|
import { useState } from 'react';
|
||
|
|
import { Button } from '@/components/ui/button';
|
||
|
|
|
||
|
|
interface Card {
|
||
|
|
id: number;
|
||
|
|
isEditing: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function Frame() {
|
||
|
|
const [cards, setCards] = useState<Card[]>([]);
|
||
|
|
const [nextId, setNextId] = useState(1);
|
||
|
|
|
||
|
|
const handleAddCard = () => {
|
||
|
|
setCards([...cards, { id: nextId, isEditing: true }]);
|
||
|
|
setNextId(nextId + 1);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleDeleteCard = (id: number) => {
|
||
|
|
setCards(cards.filter(card => card.id !== id));
|
||
|
|
};
|
||
|
|
|
||
|
|
const totalPages = cards.length + 1;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen flex flex-col items-center justify-center">
|
||
|
|
|
||
|
|
<div className="w-[450px] flex items-center justify-between px-4 py-2 mb-2" style={{ minHeight: 40 }}>
|
||
|
|
<span className="text-[#2633B9] text-[14px] font-[#1A237E400]">Page 1/{totalPages}</span>
|
||
|
|
<div className="flex gap-2">
|
||
|
|
<CopyPlus
|
||
|
|
size={18}
|
||
|
|
className="cursor-pointer text-[#1A237E] hover:text-blue-600"
|
||
|
|
onClick={handleAddCard}
|
||
|
|
/>
|
||
|
|
<Trash2
|
||
|
|
size={18}
|
||
|
|
className="cursor-pointer text-[#1A237E] hover:text-red-600"
|
||
|
|
onClick={() => handleDeleteCard(0)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div className="flex flex-col items-center gap-8">
|
||
|
|
|
||
|
|
<div className="w-[450px] flex flex-col items-center">
|
||
|
|
<div className="w-[410px] h-[510px] flex items-center justify-center">
|
||
|
|
<Image src="/pdf-image.png" alt="Excerpt Card" width={410} height={510} style={{ objectFit: 'contain' }} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
{cards.map((card, index) => (
|
||
|
|
<div key={card.id} className="w-[450px] flex flex-col items-center">
|
||
|
|
<div className="w-full flex items-center justify-between px-4 py-2 mb-2" style={{ minHeight: 40 }}>
|
||
|
|
<span className="text-[#2633B9] text-[14px] font-[#1A237E400]">Page {index + 2}/{totalPages}</span>
|
||
|
|
<div className="flex gap-2">
|
||
|
|
<CopyPlus
|
||
|
|
size={18}
|
||
|
|
className="cursor-pointer text-[#1A237E] hover:text-blue-600"
|
||
|
|
onClick={handleAddCard}
|
||
|
|
/>
|
||
|
|
<Trash2
|
||
|
|
size={18}
|
||
|
|
className="cursor-pointer text-[#1A237E] hover:text-red-600"
|
||
|
|
onClick={() => handleDeleteCard(card.id)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="w-[410px] h-[510px] bg-white rounded-lg shadow-md">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
|
||
|
|
|
||
|
|
<div className="w-[450px] flex justify-center">
|
||
|
|
<Button
|
||
|
|
onClick={handleAddCard}
|
||
|
|
variant="outline"
|
||
|
|
className="flex justify-center items-center gap-2 py-2 text-[#1A237E] font-medium bg-white hover:bg-blue-50 transition-colors shadow-sm"
|
||
|
|
style={{ width: 410 }}
|
||
|
|
>
|
||
|
|
<Plus size={20} className="text-[#1A237E]" />
|
||
|
|
<span className="text-center text-[16px] font-[400]">Add new page</span>
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|