Browse Folder

1"use client";
2 
3import { Badge } from "@/components/ui/badge";
4import { Button } from "@/components/ui/button";
5import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
6import { motion } from "framer-motion";
7import { ChevronRight, Folder } from "lucide-react";
8import type React from "react";
9import { useState } from "react";
10 
11interface FolderItem {
12  name: string;
13  content: React.ReactNode;
14}
15 
16interface FolderBrowserProps {
17  folders?: FolderItem[];
18  initialFolder?: string;
19}
20 
21export function FolderBrowser({
22  folders = [],
23  initialFolder,
24}: FolderBrowserProps) {
25  const [activeTab, setActiveTab] = useState(() => {
26    if (initialFolder) return initialFolder;
27    if (folders && folders.length > 0 && folders[0]?.name) {
28      return folders[0].name;
29    }
30    return "";
31  });
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 inset-0 bg-gradient-to-br from-foreground/[0.04] via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100 -z-10" />
44 
45      {/* Content */}
46      <div className="relative">
47        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
48          <TabsList 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">
49            {folders?.map((folder) => (
50              <TabsTrigger
51                key={folder.name}
52                value={folder.name}
53                className="group/trigger relative flex h-10 flex-shrink-0 items-center gap-2 px-3 text-xs font-medium text-foreground/70 transition-all sm:px-4 sm:text-sm data-[state=active]:h-[calc(2.5rem+1px)] data-[state=active]:rounded-t-lg data-[state=active]:border data-[state=active]:border-border/40 data-[state=active]:border-b-transparent data-[state=active]:bg-background/60 data-[state=active]:text-foreground data-[state=active]:shadow-sm hover:text-foreground"
54              >
55                <Folder
56// … truncated