102 lines
3.6 KiB
TypeScript
102 lines
3.6 KiB
TypeScript
import Image from "next/image";
|
|
import { Trash2 } from 'lucide-react';
|
|
import Link from "next/link";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
// Sample data for recent designs
|
|
const recentDesigns = [
|
|
{
|
|
icon: "/recent-image-1.png",
|
|
title: "Good morning Gabe ...",
|
|
},
|
|
{
|
|
icon: "/recent-image-2.png",
|
|
title: "Daphne's first eBook...",
|
|
},
|
|
{
|
|
icon: "/recent-image-3.png",
|
|
title: "Story of my life (Story...",
|
|
},
|
|
{
|
|
icon: "/recent-image-4.png",
|
|
title: "Good morning Gabe ...",
|
|
},
|
|
{
|
|
icon: "/recent-image-5.png",
|
|
title: "A fantastic saga, the...",
|
|
},
|
|
];
|
|
|
|
/**
|
|
* RecentDesign Component
|
|
* Displays a sidebar with recent designs and a trash section
|
|
*/
|
|
export default function RecentDesign() {
|
|
return (
|
|
<div className="bg-white border-t md:border-t-0 md:border-r border-[#D9D7D7] w-full md:w-[300px] flex flex-col h-auto md:h-screen justify-between p-4 md:px-4 md:pt-6 md:pb-4">
|
|
{/* Logo and Title Section */}
|
|
<div>
|
|
<div className="flex flex-col items-center mb-6 md:mb-12">
|
|
<Image
|
|
src="/logo.png"
|
|
alt="Wodey logo"
|
|
width={157}
|
|
height={53}
|
|
className="w-[120px] md:w-[157px] h-auto md:h-[53px]"
|
|
/>
|
|
</div>
|
|
|
|
{/* Recent Designs Header */}
|
|
<div className="text-[#27275A] text-[12px] font-[400] mb-2 pl-1">Recent designs</div>
|
|
|
|
|
|
<div className="grid grid-cols-2 md:flex md:flex-col gap-2">
|
|
{recentDesigns.map((design, idx) => (
|
|
<div
|
|
key={idx}
|
|
className="flex items-center bg-white rounded-lg py-2 px-2 hover:bg-[#F5F6FA] group transition cursor-pointer"
|
|
>
|
|
|
|
<div className="w-6 h-6 md:w-8 md:h-8 flex items-center justify-center mr-2">
|
|
<Image
|
|
src={design.icon}
|
|
alt="icon"
|
|
width={28}
|
|
height={28}
|
|
className="w-5 h-5 md:w-7 md:h-7"
|
|
/>
|
|
</div>
|
|
|
|
{/* Design Title */}
|
|
<span className="flex-1 text-[10px] text-[#27275A] truncate max-w-[100px] md:max-w-[120px] font-[400]">
|
|
{design.title}
|
|
</span>
|
|
|
|
{/* Action Buttons */}
|
|
{/* <div className="ml-auto">
|
|
<Button variant="ghost" size="icon" className="h-10 w-10 p-1">
|
|
<div className="flex items-center gap-0.5 md:gap-1 pr-5">
|
|
<Button variant="ghost" size="icon" className="h-7 w-7 md:h-8 md:w-8 p-0 hover:bg-[#e6e6e8]">
|
|
<ExternalLink className="text-[#27275A] bg-[#f2f2f3] border border-gray-200 rounded-[4px] p-1 w-7 h-7 md:w-8 md:h-8" />
|
|
</Button>
|
|
<Button variant="ghost" size="icon" className="h-7 w-7 md:h-8 md:w-8 p-0 hover:bg-[#e6e6e8]">
|
|
<Ellipsis className="text-[#27275A] bg-[#f2f2f3] border border-gray-200 rounded-[4px] p-1 w-7 h-7 md:w-8 md:h-8" />
|
|
</Button>
|
|
</div>
|
|
</Button>
|
|
</div> */}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Trash Section */}
|
|
<Button variant="ghost" className="flex items-center gap-2 p-2 hover:bg-[#F5F6FA] rounded-lg mt-4 md:mt-0 w-full justify-start">
|
|
<Link href="/creator/trash" className="flex items-center gap-2">
|
|
<Trash2 className="text-[#27275A] w-[16px] md:w-[20px]" />
|
|
<span className="text-[#27275A] text-[12px] md:text-[14px] font-[400]">Trash</span>
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
);
|
|
} |