reui-blocks/blocks/pricing5.tsx

import { Check, Minus } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { cn } from "@/lib/utils";

const formatPrice = (value: string | number) =>
  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;

const perMemberPrice = `${formatPrice(50000)} در ماه به ازای هر عضو`;

type PlanFeature = {
  feature: string;
  pro: string | boolean;
  entreprise: string | boolean;
};

const planData: PlanFeature[] = [
  {
    feature: "پروژه‌ها",
    pro: "نامحدود",
    entreprise: "نامحدود",
  },
  {
    feature: "یکپارچه‌سازی‌ها",
    pro: "نامحدود",
    entreprise: "نامحدود",
  },
  { feature: "هم‌زمانی تیم فروش روی یک قیف", pro: true, entreprise: true },
  {
    feature: "دسترسی‌های سفارشی",
    pro: true,
    entreprise: true,
  },
  {
    feature: "اعضای تیم",
    pro: perMemberPrice,
    entreprise: perMemberPrice,
  },
  {
    feature: "گزارش‌های پایه",
    pro: true,
    entreprise: true,
  },
  { feature: "گزارش‌های پیشرفته", pro: false, entreprise: true },
  { feature: "خروجی گرفتن از داده", pro: false, entreprise: true },
];

interface Pricing5Props {
  className?: string;
}

const Pricing5 = ({ className }: Pricing5Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container max-w-5xl">
        <div className="flex flex-col items-center gap-4 text-center">
          <h2 className="mb-2 text-3xl font-semibold lg:text-2xll">تعرفه‌ها</h2>
          <p className="text-muted-foreground lg:text-lg">
            طرح مناسب خود را انتخاب کنید و همین امروز شروع رایگان.
          </p>
        </div>
        <div className="mt-10 flex flex-col gap-6 lg:flex-row lg:gap-0">
          <Card className="flex w-full flex-col justify-between gap-8 text-center lg:rounded-e-none lg:border-e-0">
            <CardHeader>
              <CardTitle>حرفه‌ای</CardTitle>
              <p className="text-muted-foreground">
                برای تیم‌های در حال رشد
              </p>
            </CardHeader>
            <CardContent>
              <span className="text-2xll font-bold">{formatPrice(100000)}</span>
              <p className="mt-3 text-muted-foreground">
                به ازای هر کاربر در ماه
              </p>
            </CardContent>
            <CardFooter>
              <Button className="w-full">شروع رایگان</Button>
            </CardFooter>
          </Card>
          <Separator
            orientation="vertical"
            className="hidden h-auto lg:block"
          />
          <Card className="flex w-full flex-col justify-between gap-8 rounded-s-none border-s-0 text-center">
            <CardHeader>
              <CardTitle>سازمانی</CardTitle>
              <p className="text-muted-foreground">
                برای سازمان‌های بزرگ
              </p>
            </CardHeader>
            <CardContent>
              <span className="text-xl font-bold">تماس با ما</span>
              <p className="mt-3 text-muted-foreground">با ما تماس بگیرید</p>
            </CardContent>
            <CardFooter>
              <Button className="w-full" variant="outline">
                شروع رایگان
              </Button>
            </CardFooter>
          </Card>
        </div>
        <Table className="mt-10 min-w-[420px]">
          <TableHeader>
            <TableRow className="hover:bg-background">
              <TableHead></TableHead>
              <TableHead className="font-bold text-primary">حرفه‌ای</TableHead>
              <TableHead className="font-bold text-primary">سازمانی</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {planData.map((item) => (
              <TableRow key={item.feature} className="hover:bg-background">
                <TableCell>{item.feature}</TableCell>
                <TableCell>
                  {typeof item.pro === "boolean" ? (
                    item.pro ? (
                      <Check className="size-6" />
                    ) : (
                      <Minus className="size-6" />
                    )
                  ) : (
                    item.pro
                  )}
                </TableCell>
                <TableCell>
                  {typeof item.entreprise === "boolean" ? (
                    item.entreprise ? (
                      <Check className="size-6" />
                    ) : (
                      <Minus className="size-6" />
                    )
                  ) : (
                    item.entreprise
                  )}
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </section>
  );
};

export { Pricing5 };