RH-Lieferscheine/components/FileNavigator.js

// components/FileNavigator.js
"use client";

import { BsFiletypePdf } from "react-icons/bs";
import { FcFolder } from "react-icons/fc";
import { useRouter } from "next/navigation";

export default function FileNavigator({ files, currentPath, isAdmin = false }) {
	const router = useRouter();

	const handleFolderClick = (folderName) => {
		const segments = currentPath.split("/").filter(Boolean);
		const newPath = [...segments, folderName].join("/");

		const basePath = isAdmin ? "/admin-view" : "/niederlassung";
		router.push(`${basePath}/${newPath}`);
	};

	// Extrahiere den aktuellen Ordnernamen für die dynamische Nachricht
	const folderName = currentPath.split("/").pop();

	// Unterteile die Ordner und Dateien
	const folders = files.filter((file) => file.type === "folder");
	const documents = files.filter((file) => file.type === "file");

	return (
		<div>
			{/* Ordner nebeneinander anzeigen */}
			<div className="flex flex-wrap gap-4 mb-6">
				{folders.map((folder) => (
					<div
						key={folder.name}
						className="flex items-center p-3 hover:bg-sky-100 rounded-lg cursor-pointer "
						onClick={() => handleFolderClick(folder.name)}
					>
						<FcFolder className="mr-2 text-3xl" />
						<span className="text-left text-sm text-stone-950">
							{folder.name}
						</span>
					</div>
				))}
			</div>
			{/* Dateien untereinander anzeigen */}
			<ul>
				{documents.map((file) => (
					<li key={file.name} className="mb-4 flex items-center">
						<a
							href={`/api/files/${currentPath}/${file.name}`}
							target="_blank"
							rel="noopener noreferrer"
							className="flex items-center hover:bg-sky-100 p-3 rounded-lg cursor-pointer"
						>
							<BsFiletypePdf className="text-red-500 mr-2 text-xl" />
							<span className="text-left text-sm text-stone-950">
								{file.name}
							</span>
						</a>
					</li>
				))}
			</ul>
		</div>
	);
}