81e56ef6a0
- Updated SearchBar component to use max-width and height utilities for better responsiveness. - Adjusted ArtistsPage layout to include container for consistent padding and spacing. - Modified BestSeller and NewRelease components to use grid layout for better item arrangement. - Enhanced Frame component layout and styling for improved visual hierarchy. - Refined HomeBanner component for better spacing and text sizing. - Improved Navbar component with mobile menu functionality and responsive design. - Updated RecentDesign and SideNav components for better mobile experience and layout. - Enhanced Sidebar component with mobile menu toggle and improved navigation links. - Refactored marketplace Navbar to include mobile menu and improved layout for icons and buttons.
94 lines
3.3 KiB
TypeScript
94 lines
3.3 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 p-4">
|
|
<div className="w-full max-w-[450px] flex items-center justify-between px-4 py-2 mb-2" style={{ minHeight: 40 }}>
|
|
<span className="text-[#2633B9] text-sm md: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-4 md:gap-8 w-full max-w-[450px]">
|
|
<div className="w-full flex flex-col items-center">
|
|
<div className="w-full max-w-[410px] aspect-[410/510] flex items-center justify-center">
|
|
<Image
|
|
src="/pdf-image.png"
|
|
alt="Excerpt Card"
|
|
width={410}
|
|
height={510}
|
|
className="w-full h-full object-contain"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{cards.map((card, index) => (
|
|
<div key={card.id} className="w-full 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-sm md: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-full max-w-[410px] aspect-[410/510] bg-white rounded-lg shadow-md">
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
<div className="w-full max-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 w-full max-w-[410px]"
|
|
>
|
|
<Plus size={20} className="text-[#1A237E]" />
|
|
<span className="text-center text-sm md:text-[16px] font-[400]">Add new page</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |