six bug

blocks/feature164.tsx

@@ -32,13 +32,17 @@ interface Feature164Props {
 }
 
 const Feature164 = ({ className }: Feature164Props) => {
-  const [cardNumber, setCardNumber] = useState(0);
+  const [activeTab, setActiveTab] = useState("0");
 
   return (
     <section dir="rtl" lang="fa" className={cn("py-32", className)}>
       <div className="container">
-        <div className="flex flex-col justify-between lg:flex-row">
-          <Tabs className="lg:w-1/2" defaultValue="0">
+        <div className="flex flex-col justify-between gap-10 lg:flex-row lg:gap-16">
+          <Tabs
+            className="lg:w-1/2"
+            value={activeTab}
+            onValueChange={setActiveTab}
+          >
             <div className="mb-8">
               {integrations.map((item, index) => (
                 <TabsContent key={item.id} value={index.toString()}>
@@ -50,23 +54,19 @@ const Feature164 = ({ className }: Feature164Props) => {
                 </TabsContent>
               ))}
             </div>
-            <TabsList className="flex h-full items-center justify-center gap-2 bg-transparent p-0">
+            <TabsList className="ml-auto flex h-auto w-fit flex-row items-center gap-2 bg-transparent p-0 group-data-horizontal/tabs:h-auto">
               {integrations.map((item, index) => (
                 <TabsTrigger
                   key={item.id}
                   value={index.toString()}
-                  className={cn(
-                    "rounded-xl border px-3 py-2 text-xs sm:text-base",
-                    index === cardNumber && "border-primary",
-                  )}
-                  onClick={() => setCardNumber(index)}
+                  className="rounded-xl border border-border px-3 py-2 text-xs data-active:border-primary sm:text-base"
                 >
                   {item.title}
                 </TabsTrigger>
               ))}
             </TabsList>
           </Tabs>
-          <div className="flex flex-col justify-center lg:w-1/2 lg:items-start">
+          <div className="flex flex-col justify-center lg:w-1/2 lg:items-start lg:ps-4">
             <div className="max-w-md text-start">
               <h1 className="mb-4 text-3xl font-semibold text-balance sm:text-2xll">
                 <span className="text-muted-foreground/50">همکاری از راه دور را ساده کنید</span>{" "}