جدول مقایسه
comparisonبلاکامکانات در ستون راست و پلنها در بالا، با تیک و خط تیره در خانهها و پلن پیشنهادی هایلایت.
قیمتجدول
مقایسهی پلنها
| امکانات | شروع رایگان | حرفهایپیشنهادی ۲۹۰ هزار تومان / ماه | سازمانی ۹۹۰ هزار تومان / ماه |
|---|---|---|---|
| تعداد محصول | ۱۰ | نامحدود | نامحدود |
| دامنهی اختصاصی | |||
| گزارش فروش | |||
| چند فروشگاه | |||
| پشتیبانی | تلگرام | تلفنی | مدیر حساب |
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add comparisonنصب دستی
محتوای تب «کد» را در
components/blocks/comparison.tsxبگذارید. پیشنیاز: badge، button.$ npm i lucide-reactکپی کل فایلregistry json
ساختهشده از
استفاده
usage.tsx
1import { ComparisonTable } from "@/components/blocks/comparison"23<ComparisonTable4 plans={[{ name: "شروع", price: "رایگان" }, { name: "حرفهای", price: "۲۹۰ هزار تومان / ماه", highlighted: true }]}5 rows={[{ feature: "تعداد محصول", values: ["۱۰", "نامحدود"] }, { feature: "دامنهی اختصاصی", values: [false, true] }]}6/>پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| values | (boolean | string)[] | - | true تیک سبز، false خط تیره، رشته همونطور که هست. |