reui-blocks/blocks/compare6.tsx

"use client";

import { CircleCheck, CircleMinus, CircleX } from "lucide-react";
import { useState } from "react";

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

interface Compare6Props {
  className?: string;
}

const comparisonData = {
  features: [
    "هزینه اولیه",
    "مقیاس‌پذیری",
    "عملکرد",
    "نگهداری",
    "بازیابی داده",
    "عمر مفید",
  ],
  models: [
    {
      name: "SSD",
      attributes: [
        { value: "متوسط تا بالا", status: "negative" },
        { value: "محدود به ظرفیت", status: "neutral" },
        { value: "بسیار سریع", status: "positive" },
        { value: "نگهداری کم", status: "positive" },
        { value: "دشوار", status: "negative" },
        { value: "۵–۷ سال", status: "neutral" },
      ],
    },
    {
      name: "فضای ابری",
      attributes: [
        { value: "پرداخت بر اساس مصرف", status: "positive" },
        { value: "مقیاس‌پذیری نامحدود", status: "positive" },
        { value: "وابسته به اتصال", status: "neutral" },
        { value: "سرویس مدیریت‌شده", status: "positive" },
        { value: "وابسته به ارائه‌دهنده", status: "neutral" },
        { value: "نامحدود", status: "positive" },
      ],
    },
    {
      name: "NAS",
      attributes: [
        { value: "هزینه اولیه بالا", status: "negative" },
        { value: "قابل گسترش", status: "positive" },
        { value: "محدود به شبکه", status: "neutral" },
        { value: "نگهداری منظم", status: "negative" },
        { value: "افزونگی داخلی", status: "positive" },
        { value: "۷–۱۰ سال", status: "positive" },
      ],
    },
  ],
};

const Compare6 = ({ className }: Compare6Props) => {
  const [selectedTab, setSelectedTab] = useState(comparisonData.models[0].name);

  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("py-32 text-start", className)}
    >
      <div className="container">
        <Tabs
          defaultValue={comparisonData.models[0].name}
          onValueChange={setSelectedTab}
          className="mb-6 block md:hidden"
        >
          <TabsList className="w-full">
            {comparisonData.models.map((model, idx) => (
              <TabsTrigger key={idx} value={model.name}>
                {model.name}
              </TabsTrigger>
            ))}
          </TabsList>
        </Tabs>
        <div className="[&>div]:overflow-visible">
          <Table className="table-fixed [&_td]:border [&_th]:border">
            <TableHeader>
              <TableRow>
                <TableHead className="sticky top-0 mb-24 w-1/4 bg-background p-5 text-base font-medium text-primary after:absolute after:inset-x-0 after:-bottom-px after:h-px after:bg-border">
                  ویژگی
                </TableHead>
                {comparisonData.models.map((model, idx) => (
                  <TableHead
                    key={idx}
                    className={cn(
                      "sticky top-0 mb-24 w-1/4 bg-background p-5 text-center text-base font-medium text-primary after:absolute after:inset-x-0 after:-bottom-px after:h-px after:bg-border md:table-cell",
                      model.name !== selectedTab ? "hidden" : "",
                    )}
                  >
                    {model.name}
                  </TableHead>
                ))}
              </TableRow>
            </TableHeader>
            <TableBody>
              {comparisonData.features.map((feature, rowIdx) => (
                <TableRow key={rowIdx}>
                  <TableCell className="p-5 font-semibold whitespace-normal">
                    {feature}
                  </TableCell>
                  {comparisonData.models.map((model, colIdx) => (
                    <TableCell
                      key={colIdx}
                      className={cn(
                        "p-5 text-center whitespace-normal md:table-cell",
                        model.name !== selectedTab ? "hidden" : "",
                      )}
                    >
                      <div className="flex flex-col items-center gap-1 text-muted-foreground">
                        {model.attributes[rowIdx].status === "positive" && (
                          <span className="flex size-8 items-center justify-center rounded-full border border-green-200 bg-green-100">
                            <CircleCheck
                              className="size-4 text-green-700"
                              aria-hidden="true"
                            />
                          </span>
                        )}
                        {model.attributes[rowIdx].status === "negative" && (
                          <span className="flex size-8 items-center justify-center rounded-full border border-red-200 bg-red-100">
                            <CircleX
                              className="size-4 text-red-700"
                              aria-hidden="true"
                            />
                          </span>
                        )}
                        {model.attributes[rowIdx].status === "neutral" && (
                          <span className="flex size-8 items-center justify-center rounded-full border border-amber-200 bg-amber-100">
                            <CircleMinus
                              className="size-4 text-amber-700"
                              aria-hidden="true"
                            />
                          </span>
                        )}

                        {model.attributes[rowIdx].value}
                      </div>
                    </TableCell>
                  ))}
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      </div>
    </section>
  );
};

export { Compare6 };