1  import { useState } from "react";
 2  
 3  // Tabs component - simple implementation
 4  export const Tabs = ({ children, defaultValue, value, onValueChange }: any) => {
 5    const [activeTab, setActiveTab] = useState(defaultValue || value);
 6  
 7    const handleTabChange = (newValue: string) => {
 8      setActiveTab(newValue);
 9      onValueChange?.(newValue);
10    };
11  
12    return (
13      <div className="tabs-container">
14        {children({ activeTab, setActiveTab: handleTabChange })}
15      </div>
16    );
17  };
18  
19  export const TabsList = ({ children }: any) => (
20    <div className="flex space-x-1 rounded-lg bg-muted bg-slate-100 p-1 mb-4 overflow-x-auto">
21      {children}
22    </div>
23  );
24  
25  export const TabsTrigger = ({ value, children, activeTab, setActiveTab }: any) => (
26    <button
27      className={`px-3 py-2 text-sm font-medium rounded-md transition-colors ${
28        activeTab === value
29          ? "bg-background text-foreground shadow-sm"
30          : "text-muted-foreground hover:text-slate-600"
31      }`}
32      onClick={() => setActiveTab(value)}
33    >
34      {children}
35    </button>
36  );
37  
38  export const TabsContent = ({ value, children, activeTab }: any) => (
39    <div className={activeTab === value ? "block" : "hidden"}>{children}</div>
40  );