@props([
    'icon',
    'value',
])

<div class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-full bg-bg-soft border border-line text-sm font-semibold text-ink-1">
    <x-dynamic-component :component="'heroicon-o-' . $icon" class="w-4 h-4" />
    <span class="font-mono">{{ $value }}</span>
</div>