moh/admin-portfolio-ux-improvements

components/ui/tabs.tsx

@@ -22,16 +22,30 @@ function useTabsContext() {
 }
 
 type TabsProps = {
-  defaultValue: string;
+  defaultValue?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
   children: React.ReactNode;
   className?: string;
 };
 
-function Tabs({ defaultValue, children, className }: TabsProps) {
-  const [value, setValue] = React.useState(defaultValue);
+function Tabs({ defaultValue, value, onValueChange, children, className }: TabsProps) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue ?? "");
+  const activeValue = value ?? internalValue;
+
+  const setValue = React.useCallback(
+    (nextValue: string) => {
+      if (value === undefined) {
+        setInternalValue(nextValue);
+      }
+
+      onValueChange?.(nextValue);
+    },
+    [onValueChange, value],
+  );
 
   return (
-    <TabsContext.Provider value={{ value, setValue }}>
+    <TabsContext.Provider value={{ value: activeValue, setValue }}>
       <div className={cn("w-full", className)}>{children}</div>
     </TabsContext.Provider>
   );