s1

src/components/ui/CustomTabs.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+interface Tab {
+  label: string;
+  value: string;
+  content: React.ReactNode;
+}
+
+interface CustomTabsProps {
+  tabs: Tab[];
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+}
+
+export function CustomTabs({ tabs, defaultValue, onValueChange }: CustomTabsProps) {
+  const [activeTab, setActiveTab] = React.useState(defaultValue || tabs[0]?.value || '');
+
+  const handleTabChange = (value: string) => {
+    setActiveTab(value);
+    if (onValueChange) {
+      onValueChange(value);
+    }
+  };
+
+  return (
+    <div className="w-full">
+      <div className="flex border-b border-[#6d9e37]">
+        {tabs.map((tab) => (
+          <button
+            key={tab.value}
+            className={`px-4 py-2 font-medium text-sm focus:outline-none ${activeTab === tab.value ? 'border-x border-t border-[#6d9e37] text-[#6d9e37] rounded-t-md' : 'text-[#c7cccb]'}`}
+            onClick={() => handleTabChange(tab.value)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+      <div className="py-4">
+        {tabs.find((tab) => tab.value === activeTab)?.content}
+      </div>
+    </div>
+  );
+}