eliott/Nimbus
1
0
Fork 0
mirror of https://github.com/nimbusdotstorage/Nimbus synced 2026-04-22 17:45:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

Added: drag-n-drop to move - bare-minimum working solution

Browse Source
This commit is contained in:
Abhishek Kumar
2025-08-02 20:20:08 +05:30
parent 670081fc2f
commit a13865e693
9 changed files with 165 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
apps/web/src/components/dashboard/header/file-path.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList } from "@/components/ui/breadcrumb";
import { type BreadcrumbItem as BreadcrumbItemType } from "@/hooks/useBreadcrumb";
import { AnimatePresence, motion, type Variants } from "framer-motion";
import { useRouter, useSearchParams } from "next/navigation";
import { useBreadcrumbPath } from "@/hooks/useBreadcrumb";
@@ -85,37 +86,12 @@ export function FileBreadcrumb() {
{/* Breadcrumb items */}
{data?.map((item, index) => (
<div key={item.id}>
<motion.div
variants={variants}
initial="hidden"
animate="visible"
exit="exit"
layout
className="inline-flex items-center"
>
<BreadcrumbItem>
<BreadcrumbLink
onClick={() => handleFolderClick(item.id)}
className="flex items-center gap-2 rounded-md p-1 text-nowrap"
>
<span>{item.name}</span>
</BreadcrumbLink>
</BreadcrumbItem>
</motion.div>
{index < data.length - 1 && (
<motion.span
key={`separator-${item.id}`}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.2 }}
className="pl-3 text-neutral-200"
>
/
</motion.span>
)}
</div>
<FileBreadcrumbItem
key={item.id}
item={item}
handleFolderClick={handleFolderClick}
showSeparator={index < data.length - 1}
/>
))}
</AnimatePresence>
</BreadcrumbList>
@@ -125,3 +101,47 @@ export function FileBreadcrumb() {
</>
);
}
function FileBreadcrumbItem({
item,
handleFolderClick,
showSeparator,
}: {
item: BreadcrumbItemType;
handleFolderClick: (id: string) => void;
showSeparator: boolean;
}) {
return (
<div>
<motion.div
variants={variants}
initial="hidden"
animate="visible"
exit="exit"
layout
className="inline-flex items-center"
>
<BreadcrumbItem>
<BreadcrumbLink
onClick={() => handleFolderClick(item.id)}
className="flex items-center gap-2 rounded-md p-1 text-nowrap"
>
<span>{item.name}</span>
</BreadcrumbLink>
</BreadcrumbItem>
</motion.div>
{showSeparator && (
<motion.span
key={`separator-${item.id}`}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.2 }}
className="pl-3 text-neutral-200"
>
/
</motion.span>
)}
</div>
);
}