81 lines
2.5 KiB
TypeScript
81 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { PSEUDO_COLLECTIONS } from "./shared";
|
|
import { FolderPlus } from "lucide-react";
|
|
import {
|
|
Drawer,
|
|
DrawerClose,
|
|
DrawerContent,
|
|
DrawerHeader,
|
|
DrawerTitle,
|
|
} from "@/components/ui/drawer";
|
|
|
|
export function CollectionsDrawer({
|
|
open,
|
|
onClose,
|
|
isMobile,
|
|
}: {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
isMobile: boolean;
|
|
}) {
|
|
const direction = isMobile ? "bottom" : "right";
|
|
|
|
return (
|
|
<Drawer
|
|
open={open}
|
|
onOpenChange={(o) => !o && onClose()}
|
|
direction={direction}
|
|
>
|
|
<DrawerContent
|
|
direction={direction}
|
|
className="bg-black dark:bg-[#1a1a1a] border-white/10"
|
|
>
|
|
<DrawerHeader className="text-left border-b border-white/10 pb-4">
|
|
<DrawerTitle className="text-white">Save to Collection</DrawerTitle>
|
|
</DrawerHeader>
|
|
<div className="overflow-y-auto flex-1 p-4 space-y-1">
|
|
{PSEUDO_COLLECTIONS.map((col) => (
|
|
<button
|
|
key={col.id}
|
|
onClick={() => {
|
|
// TODO: Implement save to collection
|
|
onClose();
|
|
}}
|
|
className="flex items-center justify-between gap-3 w-full px-3 py-3 rounded-lg text-left hover:bg-white/10 transition-colors"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex items-center justify-center size-9 rounded-lg bg-white/10">
|
|
<FolderPlus className="size-4 text-white/50" />
|
|
</div>
|
|
<span className="text-sm font-medium text-white/90">
|
|
{col.name}
|
|
</span>
|
|
</div>
|
|
<span className="text-xs text-white/50 tabular-nums">
|
|
{col.count}
|
|
</span>
|
|
</button>
|
|
))}
|
|
|
|
{/* Create new collection */}
|
|
<button
|
|
onClick={() => {
|
|
// TODO: Implement create collection
|
|
onClose();
|
|
}}
|
|
className="flex items-center gap-3 w-full px-3 py-3 rounded-lg text-left hover:bg-white/10 transition-colors mt-2 border border-dashed border-white/20"
|
|
>
|
|
<div className="flex items-center justify-center size-9 rounded-lg bg-amber-400/15">
|
|
<FolderPlus className="size-4 text-amber-400" />
|
|
</div>
|
|
<span className="text-sm font-medium text-amber-400">
|
|
New Collection
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
);
|
|
}
|