text highlight and og image

2026-05-06 00:40:24 +05:30
parent 237840148f
commit 0a82a12580
16 changed files with 1611 additions and 890 deletions
@@ -0,0 +1,80 @@
+"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>
+  );
+}