Banner

کامپوننت x-banner برای نمایش یک بنر اطلاع‌رسانی یا معرفی در صفحات Blade استفاده می‌شود. این کامپوننت قابلیت نمایش عنوان، لیست آیتم‌ها (هر آیتم می‌تواند آیکن و متن داشته باشد)، و افزودن بخش‌های سفارشی مانند اکشن‌ها یا محتوای پس از عنوان را دارد. همچنین امکان شخصی‌سازی کلاس‌های CSS برای بخش‌های مختلف بنر فراهم است.

---

ویژگی‌ها

• نمایش عنوان اصلی بنر با قابلیت افزودن کلاس سفارشی
• نمایش لیست آیتم‌ها (هر آیتم شامل آیکن و متن)
• امکان افزودن محتوای سفارشی بعد از عنوان (مانند نشان یا هر محتوای دلخواه)
• پشتیبانی از بخش اکشن (مانند دکمه‌ها) در بنر
• قابلیت تعیین کلاس CSS برای ظرف اصلی، عنوان و آیتم‌ها
• کاملاً قابل شخصی‌سازی و واکنش‌گرا

---

ورودی‌های کامپوننت

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
title	string	null	متن عنوان اصلی بنر
items	array	null	آرایه‌ای از آیتم‌ها (هر آیتم شامل icon و content است)
class	string	null	کلاس‌های CSS اضافی برای ظرف اصلی بنر
titleClass	string	null	کلاس‌های CSS اضافی برای بخش عنوان
itemsClass	string	null	کلاس‌های CSS اضافی برای ظرف آیتم‌ها
titlePrefix	string	null	محتوای سفارشی که قبل از عنوان نمایش داده می‌شود
titleSuffix	string	null	محتوای سفارشی که بعد از عنوان نمایش داده می‌شود
actions	string	null	محتوای سفارشی برای بخش اکشن (مانند دکمه‌ها)

---

اسلات‌ها

نام اسلات	توضیحات
actions	محتوای دکمه‌ها یا اکشن‌های تعاملی که در بنر نمایش داده می‌شوند
titlePrefix	محتوایی که قبل از عنوان نمایش داده می‌شود
titleSuffix	محتوایی که بعد از عنوان نمایش داده می‌شود

---

مثال‌ها

نمونه پایه

@php
    $items = [
        ['icon' => 'fa-regular fa-grid-2', 'content' => 'سال اعتبار: 1402'],
        ['icon' => null, 'content' => 'طرح: ایمن‌سازی'],
        ['icon' => 'fa-regular fa-grid-2', 'content' => 'سطح اعتبار: استانی'],
        ['icon' => 'fa-regular fa-grid-2', 'content' => 'استان: مازندران'],
        ['icon' => 'fa-regular fa-grid-2', 'content' => 'استان: مازندران'],
        ['icon' => 'fa-regular fa-grid-2', 'content' => 'اعتبار مصوب (میلیون ریال): 1,000'],
    ];
@endphp

<x-banner
    title="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
    :items="$items"
>

    <x-slot name="actions">
        
        <div class="d-flex gap-3 align-items-center">
            
            <x-button
                title="عملیات"
                variant="primary"
                appearance="light"
                icon="fa-regular fa-ellipsis-vertical"
                iconPosition="right"
                size="md"
            />
            
            <x-button title="تعیین وضعیت" variant="primary" size="md" />
            
        </div>
        
    </x-slot>

    <x-slot name="titleSuffix">
        
        <x-badge
            value="درحال بررسی" 
            appearance="light"
            variant="info" 
            size="sm" 
        />
        
        <x-badge 
            value="ویژه" 
            appearance="light" 
            variant="info-2" 
            size="sm" 
        />
        
        <x-badge 
            value="1403/10/11 , 13:38:18"
            appearance="light"
            variant="success"
            size="sm" 
        />
        
        <x-badge
            value="4 از 5"
            icon="fa-regular fa-star"
            iconPosition="right"
            appearance="light"
            variant="warning"
            size="sm"
        />
        
    </x-slot>

</x-banner>