نوار اعلان
bannerبلاکنوار یکخطی بالای هدر برای خبر یا تخفیف، با یک لینک و دکمهی بستن که یادش میمونه.
لندینگاعلان
تا پایان مهر، پلن حرفهای ۳۰٪ تخفیف داره.
دیدن پلنهانصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add bannerنصب دستی
محتوای تب «کد» را در
components/blocks/banner.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { AnnouncementBanner } from "@/components/blocks/banner"23<AnnouncementBanner message="تا پایان مهر، پلن حرفهای ۳۰٪ تخفیف داره." action={{ label: "دیدن پلنها", href: "/pricing" }} storageKey="mehr-sale" />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| storageKey | string | - | اگر بدید، بستن نوار در localStorage ذخیره میشه و دفعهی بعد نشون داده نمیشه. |
| tone | "brand" | "neutral" | "brand" | رنگ برند یا معکوس متن. |