six bug

blocks/feature54.tsx

@@ -1,9 +1,14 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { Button } from "@/components/ui/button";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import type { CarouselApi } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
 import { cn } from "@/lib/utils";
 
 const features = [
@@ -145,80 +150,132 @@ interface Feature54Props {
 }
 
 const Feature54 = ({ className }: Feature54Props) => {
-  const [selection, setSelection] = useState("feature-5");
+  const [api, setApi] = useState<CarouselApi>();
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    const onSelect = () => {
+      setSelectedIndex(api.selectedScrollSnap());
+    };
+
+    onSelect();
+    api.on("select", onSelect);
+    api.on("reInit", onSelect);
+
+    return () => {
+      api.off("select", onSelect);
+      api.off("reInit", onSelect);
+    };
+  }, [api]);
+
   return (
-    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
-      <div className="flex flex-col items-center md:gap-y-4 lg:px-16">
-        <div className="container flex flex-col items-center">
-          <h3 className="mb-3 text-center text-3xl font-semibold text-pretty md:mb-4 md:text-xl lg:mb-6 lg:max-w-3xl lg:text-2xll">
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "relative w-full max-w-full overflow-hidden py-32",
+        className,
+      )}
+    >
+      <div className="mx-auto flex w-full min-w-0 max-w-5xl flex-col items-center px-4 md:gap-y-4 sm:px-6 lg:px-8">
+        <div className="flex w-full min-w-0 flex-col items-center">
+          <h3 className="mb-3 max-w-full text-center text-3xl font-semibold text-pretty break-words md:mb-4 md:text-xl lg:mb-6 lg:max-w-3xl lg:text-2xll">
             سطح دسترسی
           </h3>
         </div>
-        <div className="w-full text-center">
-          <Tabs value={selection} onValueChange={setSelection}>
-            <div className="relative">
-              <div className="container mb-6 hidden min-w-fit flex-col items-center md:flex lg:mb-8 lg:max-w-5xl">
-                <TabsList className="gap-x-2">
-                  {features.map((feature) => (
-                    <TabsTrigger key={feature.id} value={feature.id}>
-                      {feature.title}
-                    </TabsTrigger>
-                  ))}
-                </TabsList>
-              </div>
-              <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_left,var(--color-background)_0%,transparent_10%,transparent_90%,var(--color-background)_100%)] md:hidden" />
-            </div>
-            <div className="container w-full lg:max-w-5xl">
+
+        <div className="mb-6 hidden w-full min-w-0 flex-col items-center md:flex lg:mb-8">
+          <div className="inline-flex w-fit max-w-full flex-wrap items-center justify-center gap-1 rounded-lg bg-muted p-[3px] text-muted-foreground">
+            {features.map((feature, index) => (
+              <button
+                key={feature.id}
+                type="button"
+                onClick={() => api?.scrollTo(index)}
+                className={cn(
+                  "inline-flex h-7 items-center justify-center rounded-md px-2.5 text-sm font-medium whitespace-nowrap transition-all",
+                  selectedIndex === index
+                    ? "bg-background text-foreground shadow-sm"
+                    : "text-foreground/60 hover:text-foreground",
+                )}
+              >
+                {feature.title}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div className="w-full min-w-0 max-w-full overflow-hidden">
+          <Carousel
+            className="w-full min-w-0 max-w-full"
+            setApi={setApi}
+            opts={{
+              align: "start",
+              direction: "rtl",
+              startIndex: 0,
+              containScroll: "trimSnaps",
+            }}
+          >
+            <CarouselContent className="ml-0">
               {features.map((feature) => (
-                <TabsContent key={feature.id} value={feature.id}>
-                  <div className="">
-                    <div className="aspect-[1.67] w-full overflow-hidden rounded-lg border border-border bg-accent">
+                <CarouselItem
+                  key={feature.id}
+                  className="min-w-0 basis-full pl-0"
+                >
+                  <div className="w-full min-w-0 max-w-full">
+                    <div className="aspect-[5/3] w-full max-w-full overflow-hidden rounded-lg border border-border bg-accent">
                       <img
                         src={feature.image}
                         alt={`نمای ${feature.title}`}
-                        className="h-full w-full object-cover object-center"
+                        className="size-full max-w-full object-cover object-center"
+                        draggable={false}
                       />
                     </div>
                     <div
                       dir="rtl"
-                      className="hidden grid-cols-3 gap-6 py-6 md:grid"
+                      className="grid w-full min-w-0 grid-cols-1 gap-6 py-6 text-start md:grid-cols-3"
                     >
                       {feature.subfeatures.map((subfeature) => (
                         <div
-                          key={subfeature.id}
-                          className="flex flex-col items-start text-right"
+                          key={`${feature.id}-${subfeature.id}`}
+                          className="flex min-w-0 flex-col items-start text-right"
                         >
-                          <p className="mb-2 text-xs font-semibold">
+                          <p className="mb-2 text-xs font-semibold break-words">
                             {subfeature.title}
                           </p>
-                          <p className="mb-8 text-xs text-muted-foreground">
+                          <p className="text-xs text-pretty break-words text-muted-foreground md:mb-8">
                             {subfeature.description}
                           </p>
                         </div>
                       ))}
                     </div>
                   </div>
-                </TabsContent>
+                </CarouselItem>
               ))}
-            </div>
-            <div className="flex justify-center py-3 md:hidden">
-              {features.map((feature) => (
-                <Button
-                  key={feature.id}
-                  variant="ghost"
-                  size="sm"
-                  aria-label={feature.title}
-                  onClick={() => {
-                    setSelection(feature.id);
-                  }}
-                >
-                  <div
-                    className={`size-2 rounded-full ${feature.id === selection ? "bg-primary" : "bg-input"}`}
-                  />
-                </Button>
-              ))}
-            </div>
-          </Tabs>
+            </CarouselContent>
+          </Carousel>
+        </div>
+
+        <div className="flex w-full min-w-0 justify-center py-3 md:hidden">
+          {features.map((feature, index) => (
+            <Button
+              key={feature.id}
+              variant="ghost"
+              size="sm"
+              aria-label={feature.title}
+              onClick={() => api?.scrollTo(index)}
+            >
+              <div
+                className={cn(
+                  "size-2 rounded-full",
+                  selectedIndex === index ? "bg-primary" : "bg-input",
+                )}
+              />
+            </Button>
+          ))}
         </div>
       </div>
     </section>