پیام متنی (Callout)

import { Callout, CalloutTitle, CalloutDescription } from '@parto-system-design/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>