زنگِ اعلانNotification Bell

زنگوله‌ی گردی که شمارِ اعلان‌های نخونده رو روی خودش داره؛ با زیادشدنِ شمار می‌لرزه، زبانکش عقب می‌مونه و رقم‌های نشان مثلِ شماره‌شمار می‌غلتند.

محمدجواد

ساخته شده توسط محمدجواد

سازنده فارسی‌فای، بچه دولوپر

وابستگی‌ها

motion

نوع تعامل

دکمه‌ست، ولی شخصیتش با داده می‌آد نه با کلیک: هر بار `count` بالا بره، زنگ حولِ لولای بالایش تاب می‌خوره، زبانک با یک فنرِ جدا عقب می‌مونه و رقم‌ها در جهتِ تغییر غلت می‌زنن. با رسیدن به `max` نشان «+» می‌شه و روی صفر کامل محو می‌شه. خودِ کلیک رفتارِ عادیِ دکمه‌ست (فوکوس، هاور، فشار) و `onClick` هم آزاده.

پراپ‌ها

گزینه‌هایی که می‌تونی به کامپوننت بدی؛ ستاره‌دارها اجباری‌اند.

count
numberپیش‌فرض: 0

شمارِ اعلان‌های خوانده‌نشده. با هر بار زیادشدنش زنگ می‌لرزد؛ کم‌شدن یا ثابت‌ماندن لرزشی ندارد.

max
numberپیش‌فرض: 99

از این عدد به بالا نشان «۹۹+» می‌شود و رقم‌ها غلت نمی‌زنند.

variant
"count" | "dot"پیش‌فرض: "count"count · dot

`count` عدد نشان می‌دهد، `dot` فقط یک نقطه — برای وقتی که شمار مهم نیست.

size
numberپیش‌فرض: 48

قطرِ دکمه به پیکسل؛ زنگ، نشان و فونتِ نشان همه نسبت به همین حساب می‌شوند.

color
"red" | "orange" | "green" | "blue" | "violet"پیش‌فرض: "red"red · orange · green · blue · violet

رنگِ نشان؛ همان پنج رنگِ سیستمیِ مرجع.

disabled
booleanپیش‌فرض: false

کم‌رنگ و بی‌اعتنا به اشاره‌گر.

نصب

۱. این آدرس رو یک‌بار توی components.json بذار تا shadcn مخزن فارسی‌فای رو بشناسه.

components.jsonjson
{
  "registries": {
    "@farsify": "https://farsify.ir/r/{name}.json"
  }
}

۲. بعد با دستورِ زیر کامپوننت رو نصب کن.

npx shadcn@latest add @farsify/notification-bell

پیش‌نیاز: Tailwind CSS v4 و صفحهٔ راست‌به‌چپ dir="rtl".

نمونه

notification-bell.tsxtsx
"use client";

import { NotificationBell } from "@/components/farsify/notification-bell";

export function Header({ unread }: { unread: number }) {
  return (
    <header className="flex items-center justify-between gap-3">
      <span className="min-w-0 truncate text-sm">پنلِ مدیریت</span>
      <NotificationBell
        count={unread}
        max={99}
        onClick={openInbox}
        aria-label="اعلان‌ها"
      />
    </header>
  );
}

// فقط نشان بده که اعلانِ تازه هست، بی‌عدد
<NotificationBell count={1} variant="dot" color="blue" />

// اندازه و سرریز را خودت تعیین کن
<NotificationBell count={128} max={9} size={56} color="violet" />

نکته‌ها

  • `count` را از منبعِ داده‌ی خودت بده؛ همین که عدد بالا برود زنگ می‌لرزد، پس نیازی به `ref` یا متدِ دستی نیست.
  • لرزش فقط با **زیاد**شدنِ شمار می‌آید. این عمدی است: خواندنِ اعلان‌ها نباید زنگ را تکان بدهد.
  • رقم‌ها فارسی و در جعبه‌ی عرض‌ثابت می‌نشینند، چون `tabular-nums` روی ارقامِ فارسیِ Peyda اثری ندارد؛ دستی عوضشان نکن.
  • نشان در سمتِ `inline-end` می‌نشیند — در فارسی یعنی گوشه‌ی چپِ بالا. اگر پراپِ `dir` روی والد عوض شود، خودش آینه می‌شود.
  • بقیه‌ی پراپ‌های `<button>` (مثل `onClick` و `aria-label`) مستقیم به دکمه می‌رسند؛ برای برچسبِ دلخواه، `aria-label` را جایگزینِ متنِ پیش‌فرضِ صفحه‌خوان کن.
  • با `prefers-reduced-motion` لرزش و غلتیدن حذف می‌شوند: نشان می‌آید و رقم‌ها همان‌جا می‌پرند، ولی منطقِ شمار دست‌نخورده است.

مجوز

کد بعد از نصب مالِ خودته؛ هر تغییری خواستی بده و توی پروژه‌ی خودت نگهش دار. برای پروژه‌های شخصی و تجاری آزاده، حتی اگه کدت بسته باشه. فقط اسم و لینک فارسی‌فای رو یه جا توی پروژه نگه دار.