کارت سربرگ مدیریتی برای بخشهایی مثل نماینده قانونی، کارمندان و واحدها؛ شامل عنوان، توضیح، آیکن، فلش، جستجو و اکشن.
import { TaavBusinessSectionToolbarCard } from "@repo/ui/taav/business";این کامپوننت برای سربرگهای مدیریتیِ بخشهای داخلی استفاده میشود. در این الگو، محتوای اصلی کارت نمایشی است و اکشن کمکی، جستجو و فلش ناوبری برای دسترسی سریع به مسیر بعدی یا عملیات مرتبط در نظر گرفته شدهاند.
همان الگوی مدیریتی در تم روشن هم باید قابل مشاهده باشد تا تضاد رنگی و مرزها در هر دو تم بررسی شوند.
در حالت حداقلی، کارت فقط عنوان، توضیح و آیکن را نمایش میدهد و فلش ناوبری و دکمه اکشن پایین کارت مخفی میشوند.
ثبت و مدیریت کارمندها و اعضای مرتبط با همین بخش، با دسترسی سریع به جستجو
اگر دادههای بخش هنوز آماده نشده باشند، باید اسکلتون یا placeholder همابعاد همین کارت نمایش داده شود تا جای صفحه ثابت بماند.
وقتی عملیات برای کاربر در دسترس نیست، دکمه اکشن باید hidden یا disabled شود و خود کارت همچنان قابل مشاهده باقی بماند.
| Prop | نوع | پیشفرض | توضیح |
|---|---|---|---|
title* | string | — | عنوان اصلی سربرگ مدیریتی |
description | string | — | توضیح کوتاه زیر عنوان |
icon | ReactNode | — | آیکن بخش در باکس روشن |
showArrow | boolean | true | نمایش فلش ناوبری |
onArrowClick | () => void | — | رفتار کلیک روی فلش |
href | string | — | لینک دسترسی برای فلش |
search | { value?: string; placeholder?: string; onChange?: (value: string) => void; } | — | بخش جستجو درون کارت |
action | { label: string; icon?: ReactNode; onClick?: () => void; disabled?: boolean; } | — | اکشن کمکی کارت |
className | string | — | افزودن class به shell کارت |