Browse Folder

1"use client";
2 
3import { Button } from "@base-ui/react/button";
4import { motion } from "framer-motion";
5import { ChevronRight, Folder } from "lucide-react";
6import type React from "react";
7import { useState } from "react";
8 
9interface FolderItem {
10  name: string;
11  content: React.ReactNode;
12}
13 
14interface FolderBrowserBaseuiProps {
15  folders?: FolderItem[];
16  initialFolder?: string;
17}
18 
19export function FolderBrowserBaseui({
20  folders = [],
21  initialFolder,
22}: FolderBrowserBaseuiProps) {
23  const [activeTab, setActiveTab] = useState(() => {
24    if (initialFolder) return initialFolder;
25    if (folders && folders.length > 0 && folders[0]?.name) {
26      return folders[0].name;
27    }
28    return "";
29  });
30 
31  const activeFolder = folders.find((f) => f.name === activeTab);
32 
33  return (
34    <motion.div
35      initial={{ opacity: 0, y: 20 }}
36      animate={{ opacity: 1, y: 0 }}
37      transition={{ duration: 0.4 }}
38      className="group relative overflow-hidden rounded-2xl border border-border/40 bg-background/60 backdrop-blur transition-all hover:border-border/60 hover:shadow-lg"
39      role="region"
40      aria-label="Folder browser"
41    >
42      {/* Gradient overlay */}
43      <div className="absolute -z-10 inset-0 bg-gradient-to-br from-foreground/[0.04] via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
44 
45      {/* Content */}
46      <div className="relative">
47        {/* Tab List */}
48        <div
49          role="tablist"
50          className="relative flex h-10 w-full items-end justify-start overflow-x-auto overflow-y-hidden border-b border-border/40 bg-transparent p-0 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
51        >
52          {folders?.map((folder) => (
53            <button
54              key={folder.name}
55              role="tab"
56              type="button"
57              aria-selected={activeTab === folder.name}
58              onClick={() => setActiveTab(folder.name)}
59              className={`group/trigger relative flex h-10 flex-shrink-0 items-center gap-2 px-3 text-xs font-medium transition-all sm:px-4 sm:text-sm hover:text-foreground ${
60                activeTab === folder.name
61                  ? "h-[calc(2.5rem+1px)] rounded-t-lg border border-border/40 border-b-transparent bg-background/60 text-foreground shadow-sm"
62                  : "text-foreground/70"
63              }`}
64            >
65              <Folder
66                className="h-4 w-4 text-foreground/40 group-hover/trigger:text-foreground/70"
67// … truncated