> ## Documentation Index
> Fetch the complete documentation index at: https://docs.laravelshopper.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Stock Badge

> Visual indicator for product stock levels

export const PreviewStockBadge = ({stock}) => {
  const isLow = stock < 10;
  return <span className={`sh-stock-badge ${isLow ? 'sh-stock-badge-low' : 'sh-stock-badge-ok'}`}>
      {stock}
    </span>;
};

export const ComponentPreview = ({children, className = '', centered = true}) => {
  return <div className={`sh-preview ${className}`}>
      <div className={`sh-preview-content ${centered ? 'flex items-center justify-center' : ''}`}>
        {children}
      </div>
    </div>;
};

The Stock Badge component displays a colored badge indicating stock levels. It automatically changes color based on the stock quantity threshold.

## Preview

<ComponentPreview>
  <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
    <PreviewStockBadge stock={5} />

    <PreviewStockBadge stock={25} />

    <PreviewStockBadge stock={100} />
  </div>
</ComponentPreview>

## Usage

```blade theme={null}
<x-shopper::stock-badge :stock="$product->stock" />
```

## Props

<ParamField path="stock" type="int" required>
  The stock quantity to display. Values below 10 show as red (low stock), 10 or above show as green.
</ParamField>

## Behavior

| Stock Value | Color | Meaning           |
| ----------- | ----- | ----------------- |
| `< 10`      | Red   | Low stock warning |
| `>= 10`     | Green | Stock OK          |

## Examples

### Low Stock

<ComponentPreview>
  <PreviewStockBadge stock={3} />
</ComponentPreview>

```blade theme={null}
<x-shopper::stock-badge :stock="3" />
```

### Normal Stock

<ComponentPreview>
  <PreviewStockBadge stock={50} />
</ComponentPreview>

```blade theme={null}
<x-shopper::stock-badge :stock="50" />
```

### In a Table

```blade theme={null}
<table>
    <tr>
        <td>Product Name</td>
        <td>
            <x-shopper::stock-badge :stock="$product->stock" />
        </td>
    </tr>
</table>
```

## Blade Component Source

```blade theme={null}
@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>
```