aragrp/components/pricing-comparator.tsx

import { Button } from "@/components/ui/button";
import { Cpu, Sparkles } from "lucide-react";
import Link from "next/link";

const tableData = [
  {
    feature: "ویژگی ۱",
    free: true,
    pro: true,
    startup: true,
  },
  {
    feature: "ویژگی ۲",
    free: true,
    pro: true,
    startup: true,
  },
  {
    feature: "ویژگی ۳",
    free: false,
    pro: true,
    startup: true,
  },
  {
    feature: "توکن‌ها",
    free: "",
    pro: "۲۰ کاربر",
    startup: "نامحدود",
  },
  {
    feature: "تماس ویدیویی",
    free: "",
    pro: "۱۲ هفته",
    startup: "۵۶",
  },
  {
    feature: "پشتیبانی",
    free: "",
    pro: "ثانیه‌ها",
    startup: "نامحدود",
  },
  {
    feature: "امنیت",
    free: "",
    pro: "۲۰ کاربر",
    startup: "نامحدود",
  },
];

export default function PricingComparator() {
  return (
    <section className="bg-background py-16 md:py-32">
      <div className="mx-auto max-w-5xl px-6">
        <div className="w-full overflow-auto lg:overflow-visible">
          <table className="w-[200vw] border-separate border-spacing-x-3 md:w-full">
            <thead className="bg-background sticky top-0 z-10">
              <tr className="*:py-4 *:text-start *:font-medium">
                <th className="lg:w-2/5"></th>
                <th className="space-y-3">
                  <span className="block">رایگان</span>

                  <Button asChild variant="outline" size="sm">
                    <Link href="/login?utm_source=pricing-free">شروع کنید</Link>
                  </Button>
                </th>
                <th className="bg-muted rounded-t-xl space-y-3 px-4 border dark:border-transparent border-border">
                  <span className="block">حرفه‌ای</span>
                  <Button asChild size="sm">
                    <Link href="/login?utm_source=pricing-professional">
                      شروع کنید
                    </Link>
                  </Button>
                </th>
                <th className="space-y-3">
                  <span className="block">استارتاپ</span>
                  <Button asChild variant="outline" size="sm">
                    <Link href="/login?utm_source=pricing-startup">
                      شروع کنید
                    </Link>
                  </Button>
                </th>
              </tr>
            </thead>
            <tbody className="text-caption text-sm">
              <tr className="*:py-3">
                <td className="flex items-center gap-2 font-medium">
                  <Cpu className="size-4" />
                  <span>ویژگی‌ها</span>
                </td>
                <td></td>
                <td className="bg-muted border-x dark:border-x-transparent border-border px-4"></td>
                <td></td>
              </tr>
              {tableData.slice(-4).map((row, index) => (
                <tr key={index} className="*:border-b *:dark:border-b-transparent *:border-border *:py-3">
                  <td className="text-muted-foreground">{row.feature}</td>
                  <td className="text-foreground">
                    {row.free === true ? (
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="currentColor"
                        className="size-4 text-primary"
                      >
                        <path
                          fillRule="evenodd"
                          d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                          clipRule="evenodd"
                        />
                      </svg>
                    ) : (
                      row.free
                    )}
                  </td>
                  <td className="bg-muted border-x border-border px-4">
                    <div className="-mb-3 border-b dark:border-b-transparent border-border py-3">
                      {row.pro === true ? (
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 24 24"
                          fill="currentColor"
                          className="size-4 text-primary"
                        >
                          <path
                            fillRule="evenodd"
                            d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                            clipRule="evenodd"
                          />
                        </svg>
                      ) : (
                        <span className="text-foreground">{row.pro}</span>
                      )}
                    </div>
                  </td>
                  <td className="text-foreground">
                    {row.startup === true ? (
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="currentColor"
                        className="size-4 text-primary"
                      >
                        <path
                          fillRule="evenodd"
                          d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                          clipRule="evenodd"
                        />
                      </svg>
                    ) : (
                      row.startup
                    )}
                  </td>
                </tr>
              ))}
              <tr className="*:pb-3 *:pt-8">
                <td className="flex items-center gap-2 font-medium">
                  <Sparkles className="size-4" />
                  <span>مدل‌های هوش مصنوعی</span>
                </td>
                <td></td>
                <td className="bg-muted border-x dark:border-x-transparent border-border px-4"></td>
                <td></td>
              </tr>
              {tableData.map((row, index) => (
                <tr key={index} className="*:border-b *:dark:border-b-transparent *:border-border *:py-3">
                  <td className="text-muted-foreground">{row.feature}</td>
                  <td className="text-foreground">
                    {row.free === true ? (
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="currentColor"
                        className="size-4 text-primary"
                      >
                        <path
                          fillRule="evenodd"
                          d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                          clipRule="evenodd"
                        />
                      </svg>
                    ) : (
                      row.free
                    )}
                  </td>
                  <td className="bg-muted border-x border-border px-4">
                    <div className="-mb-3 border-b dark:border-b-transparent border-border py-3">
                      {row.pro === true ? (
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 24 24"
                          fill="currentColor"
                          className="size-4 text-primary"
                        >
                          <path
                            fillRule="evenodd"
                            d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                            clipRule="evenodd"
                          />
                        </svg>
                      ) : (
                        <span className="text-foreground">{row.pro}</span>
                      )}
                    </div>
                  </td>
                  <td className="text-foreground">
                    {row.startup === true ? (
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="currentColor"
                        className="size-4 text-primary"
                      >
                        <path
                          fillRule="evenodd"
                          d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                          clipRule="evenodd"
                        />
                      </svg>
                    ) : (
                      row.startup
                    )}
                  </td>
                </tr>
              ))}
              <tr className="*:py-6">
                <td></td>
                <td></td>
                <td className="bg-muted rounded-b-xl border-x border-b dark:border-x-transparent dark:border-b-transparent border-border px-4"></td>
                <td></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}