کارت

@using BzCore.Components.Card
@using BzCore.Enums

<div class="card-grid">
    <BzStatCard Icon="fa-solid fa-users" Value="12,480" Label="کاربران فعال"
                Trend="12%" TrendUp="true" Color="BzColor.Primary" />

    <BzStatCard Icon="fa-solid fa-cart-shopping" Value="3,210" Label="سفارش ها"
                Trend="8%" TrendUp="true" Color="BzColor.Success" Filled />

    <BzStatCard Icon="fa-solid fa-coins" Value="89.5M" Label="درآمد (تومان)"
                Trend="3%" TrendUp="false" Color="BzColor.Warning" />

    <BzStatCard Icon="fa-solid fa-clock-rotate-left" Value="42" Label="در انتظار"
                Color="BzColor.Info" />
</div>

<style>
    /* equal-height, responsive columns */
    .card-grid {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        align-items: stretch;
    }
    .card-grid > * { height: 100%; }
</style>

@using BzCore.Components.Card
@using BzCore.Components.Button
@using BzCore.Enums

<div class="card-grid">
    @foreach (var v in Enum.GetValues<BzCardVariant>())
    {
        <BzCard Variant="v" Color="BzColor.Primary" Title="@v.ToString()"
                Subtitle="نمونه کارت" Icon="fa-solid fa-cube" Hoverable
                ImageUrl="@(v is BzCardVariant.Media or BzCardVariant.Horizontal ? "/img/ph.svg" : null)">
            <ChildContent>
                <p>این یک کارت از نوع <strong>@v</strong> است.</p>
            </ChildContent>
            <Footer>
                <BzButton Size="BzSize.Small" Text="جزییات" Variant="BzButtonVariant.Soft" />
                <BzButton Size="BzSize.Small" Text="حذف" Variant="BzButtonVariant.Text"
                          Color="BzColor.Danger" />
            </Footer>
        </BzCard>
    }
</div>

<style>
    .card-grid {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        align-items: stretch;
    }
    .card-grid > * { height: 100%; }
</style>

@using BzCore.Components.Card
@using BzCore.Components.Button
@using BzCore.Enums

<BzCard Variant="BzCardVariant.Gradient" Color="BzColor.Primary"
        Title="پلن طلایی" Icon="fa-solid fa-crown">
    <ChildContent><p>مثلا برا پلن vip و ... بدرد میخوره</p></ChildContent>
    <Footer><BzButton Size="BzSize.Small" Text="انتخاب" /></Footer>
</BzCard>

<BzCard Variant="BzCardVariant.Soft" Color="BzColor.Success"
        Title="موفقیت" Icon="fa-solid fa-check">
    <ChildContent><p>این یکی رنگ success برا کارت میزاره</p></ChildContent>
</BzCard>

<BzCard Variant="BzCardVariant.AccentStart" Color="BzColor.Danger"
        Title="هشدار مهم" Icon="fa-solid fa-bell">
    <ChildContent><p>نوار تایید کنارش هس</p></ChildContent>
</BzCard>

@*
Width="240px" pins a card to a fixed width instead of letting the grid size it.
A clickable card:
    <BzCard Clickable OnClick="@(() => Nav.NavigateTo("/details"))" ... />
*@