کارت سربرگ بیزینسی برای نمایش عنوان، توضیح، آیکن، فلش، سوییچ، دکمه اکشن و جستجو در بخشهای مدیریتی و تنظیماتی.
import { TaavBusinessHeaderCard } from "@repo/ui/taav/business";این کامپوننت برای بخشهایی مثل نماینده قانونی، فهرست کارمندان، فهرست واحدها و حالتهای تنظیماتی مشابه ساخته شده است. بسته به variant، سوییچ، دکمه اکشن، لینک جزئیات یا جستجو نمایش داده میشود.
<TaavBusinessHeaderCard
title="هزینههای جانبی"
description="هزینههای ثابت یا درصدی مانند کارمزد اداری، هزینه تشکیل پرونده و هزینه خدمات را در این بخش تعریف کنید."
icon={<BadgePercent />}
variant="toggleWithLink"
enabled={enabled}
onToggle={setEnabled}
/>| Prop | نوع | پیشفرض | توضیح |
|---|---|---|---|
title* | ReactNode | — | عنوان اصلی سربرگ بیزینسی |
description | ReactNode | — | توضیح کوتاه زیر عنوان |
icon | ReactNode | — | آیکن داخل باکس teal در سمت راست |
variant | "toggleWithLink" | "toggle" | "action" | "actionWithSearch" | "navigation" | — | نوع چیدمان سربرگ و کنترلهای داخلی |
showArrow | boolean | — | نمایش/عدم نمایش فلش سمت راست |
href / onNavigate / onClick | string / fn / fn | — | رفتار فلش یا ناوبری |
enabled / defaultEnabled / onToggle | boolean / boolean / fn | — | کنترل سوییچ فعال/غیرفعال |
toggleLabels | { enabled?: ReactNode; disabled?: ReactNode } | — | برچسبهای سوییچ |
action | { label; icon?; onClick?; disabled? } | — | دکمه اکشن سمت چپ |
detailLink | { label; href?; onClick?; disabled? } | — | لینک جزئیات زیر توضیح |
search | { value?; placeholder?; onChange?; disabled? } | — | نوار جستجو در variant اکشن |
loading / disabled | boolean / boolean | — | حالت بارگذاری و غیرفعال |
themeMode | "auto" | "light" | "dark" | — | هماهنگی با تم روشن یا تیره |
className / wrapperClassName | string | — | سفارشیسازی ظاهر کارت |