reui-blocks/blocks/compare7.tsx

import React from "react";

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";

interface CompareRow {
  feature: string;
  primary: string;
  secondary: string;
  secondaryTooltip?: {
    title: string;
    description: string;
  };
}

interface Compare7Props {
  heading?: string;
  description?: string;
  primaryLabel?: string;
  secondaryLabel?: string;
  rows?: CompareRow[];
  className?: string;
}

const Compare7 = ({
  heading = "مقایسه راهکارها",
  description = "مقایسه‌ای شفاف از قابلیت‌ها، مزایا و محدودیت‌های راهکارهای مختلف توسعه وب.",
  primaryLabel = "Shadcn",
  secondaryLabel = "Bootstrap",
  rows = [
    {
      feature: "سیستم طراحی",
      primary: "مدرن، مبتنی بر utility",
      secondary: "کلاسیک، مبتنی بر کامپوننت",
    },
    {
      feature: "سفارشی‌سازی",
      primary: "بسیار قابل سفارشی‌سازی",
      secondary: "محدود به‌صورت پیش‌فرض",
    },
    {
      feature: "حالت تاریک",
      primary: "داخلی",
      secondary: "نیاز به پیکربندی اضافه",
    },
    {
      feature: "پشتیبانی TypeScript",
      primary: "درجه یک",
      secondary: "جزئی",
    },
    {
      feature: "دسترس‌پذیری",
      primary: "تمرکز بر دسترس‌پذیری",
      secondary: "پایه",
    },
    {
      feature: "تعداد کامپوننت",
      primary: "۳۰+",
      secondary: "۲۵+",
    },
    {
      feature: "مجوز",
      primary: "MIT",
      secondary: "MIT",
    },
    {
      feature: "کامپوننت‌های ویژه",
      primary: "موجود",
      secondary: "شامل نمی‌شود",
      secondaryTooltip: {
        title: "ویژه نسخه تجاری",
        description:
          "برخی قابلیت‌های پیشرفته تنها در نسخه‌های تجاری یا با استفاده از افزونه‌های جانبی قابل استفاده هستند.",
      },
    },
    {
      feature: "کیت Figma",
      primary: "بله",
      secondary: "خیر",
      secondaryTooltip: {
        title: "فاقد کیت رسمی طراحی رابط",
        description:
          "چارچوب رابط کیت رسمی طراحی رابط ارائه نمی‌کند، اما نمونه‌های توسعه‌یافته توسط جامعه کاربری در دسترس هستند.",
      },
    },
  ],
  className,
}: Compare7Props) => {
  return (
    <TooltipProvider>
      <section
        dir="rtl"
        lang="fa"
        className={cn("py-32 text-start", className)}
      >
        <div className="container">
          <h2 className="mb-4 text-center text-xl font-semibold">{heading}</h2>
          <p className="mb-8 text-center text-muted-foreground">
            {description}
          </p>
          <div className="mx-auto max-w-3xl overflow-x-auto">
            <Table className="rounded border text-start shadow-lg">
              <TableHeader>
                <TableRow>
                  <TableHead className="px-6 py-4 font-semibold">
                    ویژگی
                  </TableHead>
                  <TableHead className="bg-muted px-6 py-4 font-semibold">
                    {primaryLabel}
                  </TableHead>
                  <TableHead className="px-6 py-4 font-semibold">
                    {secondaryLabel}
                  </TableHead>
                </TableRow>
              </TableHeader>
              <TableBody className="text-foreground">
                {rows.map((row, index) => (
                  <TableRow key={index}>
                    <TableCell className="px-6 py-4">{row.feature}</TableCell>
                    <TableCell className="bg-muted px-6 py-4">
                      {row.primary}
                    </TableCell>
                    <TableCell className="relative px-6 py-4">
                      {row.secondaryTooltip ? (
                        <Tooltip>
                          <TooltipTrigger asChild>
                            <span className="cursor-pointer underline decoration-dotted">
                              {row.secondary}
                            </span>
                          </TooltipTrigger>
                          <TooltipContent sideOffset={8} className="max-w-xs">
                            <span className="mb-1 block font-semibold">
                              {row.secondaryTooltip.title}
                            </span>
                            {row.secondaryTooltip.description}
                          </TooltipContent>
                        </Tooltip>
                      ) : (
                        row.secondary
                      )}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </div>
      </section>
    </TooltipProvider>
  );
};

export { Compare7 };