پیام متنی (Callout)

import { Callout, CalloutTitle, CalloutDescription } from '@partodata/ui'

<Callout>
  <CalloutTitle>توجه</CalloutTitle>
  <CalloutDescription>این یک پیام اطلاعاتی است.</CalloutDescription>
</Callout>

<div className="flex flex-col gap-4">
  <Callout variant="info">
    <CalloutTitle>اطلاعات</CalloutTitle>
    <CalloutDescription>این قابلیت به‌زودی فعال خواهد شد.</CalloutDescription>
  </Callout>

  <Callout variant="warning">
    <CalloutTitle>هشدار</CalloutTitle>
    <CalloutDescription>اعتبار حساب شما رو به اتمام است.</CalloutDescription>
  </Callout>

  <Callout variant="destructive">
    <CalloutTitle>خطا</CalloutTitle>
    <CalloutDescription>ارتباط با سرور قطع شده است.</CalloutDescription>
  </Callout>

  <Callout variant="success">
    <CalloutTitle>موفقیت</CalloutTitle>
    <CalloutDescription>تغییرات ذخیره شد.</CalloutDescription>
  </Callout>

  <Callout variant="neutral">
    <CalloutTitle>یادداشت</CalloutTitle>
    <CalloutDescription>این بخش در حال بروزرسانی است.</CalloutDescription>
  </Callout>
</div>

<Callout variant="info" icon={null}>
  این پیام بدون آیکون نمایش داده می‌شود.
</Callout>

import { RocketIcon } from 'lucide-react'
;<Callout variant="info" icon={<RocketIcon className="size-5" />}>
  <CalloutTitle>قابلیت جدید</CalloutTitle>
  <CalloutDescription>نسخه جدید با امکانات بیشتر منتشر شد.</CalloutDescription>
</Callout>

<Callout variant="warning">پیش از خروج، تغییرات را ذخیره کنید.</Callout>

import { Callout, Button } from '@partodata/ui'

// اقدامات زیر محتوا (پیش‌فرض)
;<Callout variant="info" actions={<Button size="sm">تنظیم دسترسی</Button>}>
  برای مشاهدهٔ داده‌های این کمپین به دسترسی بیشتری نیاز دارید.
</Callout>

// اقدامات در همان ردیف محتوا
;<Callout
  variant="warning"
  layout="horizontal"
  actions={
    <Button size="sm" variant="outline">
      تمدید
    </Button>
  }
>
  سهمیهٔ این ماه رو به پایان است.
</Callout>

// پشته در عرض کم، کنار هم در عرض زیاد
;<Callout variant="neutral" layout="responsive" actions={<Button size="sm">مشاهده</Button>}>
  گزارش جدیدی برای این کمپین آماده شده است.
</Callout>