Stock Badge

<x-shopper::stock-badge :stock="$product->stock" />

<x-shopper::stock-badge :stock="3" />

<x-shopper::stock-badge :stock="50" />

<table>
    <tr>
        <td>Product Name</td>
        <td>
            <x-shopper::stock-badge :stock="$product->stock" />
        </td>
    </tr>
</table>

@props([
    'stock',
])

<span
    @class([
        'me-2 inline-flex rounded-full px-1.5 text-xs leading-5 font-semibold',
        'bg-danger-100 text-danger-800' => $stock < 10,
        'bg-success-100 text-success-800' => $stock >= 10,
    ])
>
    {{ $stock }}
</span>