reui-blocks/blocks/compare8.tsx

import {
  Accessibility,
  BadgeCheck,
  Figma,
  Gem,
  LayoutDashboard,
  ListChecks,
  Moon,
  Settings2,
  Type,
} from "lucide-react";
import { Check, X } from "lucide-react";
import React from "react";

import { cn } from "@/lib/utils";

type Feature = {
  icon: React.ReactNode;
  label: string;
  description: string;
  shadcn: true | false | "partial";
  bootstrap: true | false | "partial";
  tooltip?: { content: React.ReactNode };
};

const features: Feature[] = [
  {
    icon: <LayoutDashboard className="text-gray-500" aria-hidden="true" />,
    label: "سیستم طراحی",
    description: "معماری مدرن و مبتنی بر Utility که انعطاف بیشتری برای توسعه و سفارشی‌سازی فراهم می‌کند.",
    shadcn: true,
    bootstrap: true,
  },
  {
    icon: <Settings2 className="text-gray-500" aria-hidden="true" />,
    label: "سفارشی‌سازی",
    description: "امکان شخصی‌سازی کامل بدون وابستگی به ساختارهای از پیش تعریف‌شده.",
    shadcn: true,
    bootstrap: false,
  },
  {
    icon: <Moon className="text-gray-500" aria-hidden="true" />,
    label: "حالت تاریک",
    description: "پشتیبانی داخلی از حالت تیره بدون نیاز به تنظیمات پیچیده.",
    shadcn: true,
    bootstrap: false,
  },
  {
    icon: <Type className="text-gray-500" aria-hidden="true" />,
    label: "پشتیبانی زبان نوع‌ایمن",
    description: "هماهنگی کامل با زبان نوع‌ایمن برای توسعه پروژه‌های بزرگ.",
    shadcn: true,
    bootstrap: "partial",
  },
  {
    icon: <Accessibility className="text-gray-500" aria-hidden="true" />,
    label: "دسترس‌پذیری",
    description: "رعایت استانداردهای دسترس‌پذیری برای تجربه کاربری بهتر.",
    shadcn: true,
    bootstrap: false,
  },
  {
    icon: <ListChecks className="text-gray-500" aria-hidden="true" />,
    label: "تعداد کامپوننت",
    description: "بیش از ۳۰ کامپوننت در برابر بیش از ۲۵ کامپوننت.",
    shadcn: true,
    bootstrap: true,
  },
  {
    icon: <BadgeCheck className="text-gray-500" aria-hidden="true" />,
    label: "مجوز",
    description: "مجوز MIT برای هر دو.",
    shadcn: true,
    bootstrap: true,
  },
  {
    icon: <Gem className="text-gray-500" aria-hidden="true" />,
    label: "کامپوننت‌های ویژه",
    description:
      "کامپوننت‌های پیشرفته به‌صورت آماده ارائه می‌شوند و نیاز به توسعه مجدد را کاهش می‌دهند.",
    shadcn: true,
    bootstrap: false,
    tooltip: {
      content: (
        <>
          <span className="mb-1 block font-semibold">ویژه نسخه تجاری</span>
          برخی کامپوننت‌های پیشرفته فقط در نسخه‌های پولی در دسترس‌اند یا به
          کتابخانه‌های شخص ثالث نیاز دارند.
        </>
      ),
    },
  },
  {
    icon: <Figma className="text-gray-500" aria-hidden="true" />,
    label: "کیت طراحی رابط",
    description:
      "کیت رسمی طراحی رابط برای ری یو آی موجود است؛ برای چارچوب رابط ارائه نمی‌شود.",
    shadcn: true,
    bootstrap: false,
    tooltip: {
      content: (
        <>
          <span className="mb-1 block font-semibold">
            فاقد کیت رسمی طراحی رابط
                              </span>
          برای چارچوب رابط کیت رسمی طراحی رابط وجود ندارد، اما نمونه‌های توسعه‌یافته توسط جامعه کاربری قابل استفاده هستند.
                        </>
      ),
    },
  },
];

interface Compare8Props {
  className?: string;
}

const Compare8 = ({ className }: Compare8Props) => {
  return (
    <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">چرا این راهکار را انتخاب کنیم؟</h2>
        <p className="mb-8 text-center text-muted-foreground">
          مقایسه‌ای شفاف از قابلیت‌ها، عملکرد و ارزش واقعی هر راهکار.
                          </p>
        <div className="mx-auto max-w-4xl divide-y divide-border overflow-x-auto rounded-lg border-border bg-background shadow">
          <div className="hidden rounded-t-lg bg-muted text-start text-base font-semibold text-foreground sm:flex">
            <div className="w-16 px-6 py-4"></div>
            <div className="flex-1 px-6 py-4">ویژگی</div>
            <div className="w-40 px-6 py-4">ری یو آی</div>
            <div className="w-40 px-6 py-4">چارچوب رابط</div>
          </div>
          {features.map((row) => (
            <div
              key={row.label}
              className="flex flex-col items-start text-start sm:flex-row sm:items-center"
            >
              <div className="flex w-full items-center justify-start px-6 pt-4 sm:w-16 sm:justify-center sm:py-4">
                {row.icon}
                <span className="ms-3 text-base font-medium sm:hidden">
                  {row.label}
                </span>
              </div>
              <div className="w-full flex-1 px-6 pb-2 sm:py-4">
                <div className="hidden font-medium sm:block">{row.label}</div>
                <div className="mt-2 mb-2 text-sm text-muted-foreground sm:mb-0">
                  {row.description}
                </div>
              </div>
              <div className="flex w-full items-center justify-start px-6 pb-2 sm:w-40 sm:justify-center sm:py-4">
                {row.shadcn === true ? (
                  <Check
                    className="size-5 text-green-600"
                    aria-label="دارد"
                  />
                ) : row.shadcn === "partial" ? (
                  <Check
                    className="size-5 text-yellow-500"
                    aria-label="جزئی"
                  />
                ) : (
                  <X className="size-5 text-destructive" aria-label="ندارد" />
                )}
                <span className="ms-2 text-xs font-medium text-muted-foreground sm:hidden">
                  ری یو آی
                </span>
              </div>
              <div className="flex w-full items-center justify-start border-border px-6 pb-4 sm:w-40 sm:justify-center sm:border-0 sm:py-4">
                {row.bootstrap === true ? (
                  <Check
                    className="size-5 text-green-600"
                    aria-label="دارد"
                  />
                ) : row.bootstrap === "partial" ? (
                  <Check
                    className="size-5 text-yellow-500"
                    aria-label="جزئی"
                  />
                ) : row.bootstrap === false && row.tooltip ? (
                  <span className="inline-block h-5" aria-hidden="true">
                    
                  </span>
                ) : (
                  <X className="size-5 text-destructive" aria-label="ندارد" />
                )}
                <span className="ms-2 text-xs font-medium text-muted-foreground sm:hidden">
                  چارچوب رابط
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Compare8 };