Product Quick View

<div class="w-full max-w-2xl">
    <BbCard>
        <BbCardContent class="p-6">
            <div class="grid md:grid-cols-2 gap-6">
                @* Left side - Image placeholder *@
                <div class="bg-muted rounded-lg flex items-center justify-center h-full min-h-[280px]">
                    <!-- package icon SVG -->
                </div>

                @* Right side - Product details *@
                <div class="space-y-4 pt-4">
                    <BbBadge Variant="BadgeVariant.Secondary">New Arrival</BbBadge>

                    <h2 class="text-xl font-semibold">Premium Wireless Earbuds</h2>

                    <div class="flex items-center gap-2">
                        <BbRating ReadOnly="true" Value="4.3" />
                        <span class="text-sm text-muted-foreground">(86 reviews)</span>
                    </div>

                    <p class="text-2xl font-bold">$89.99</p>

                    <p class="text-sm text-muted-foreground">
                        True wireless earbuds with active noise cancellation, transparency mode, and 24hr total battery life.
                    </p>

                    <BbSeparator />

                    <div class="space-y-2">
                        <label class="text-sm font-medium">Size</label>
                        <BbSelect @bind-Value="selectedSize">
                            <BbSelectTrigger>
                                <BbSelectValue Placeholder="Select size" />
                            </BbSelectTrigger>
                            <BbSelectContent>
                                <BbSelectItem Value="Small">Small</BbSelectItem>
                                <BbSelectItem Value="Medium">Medium</BbSelectItem>
                                <BbSelectItem Value="Large">Large</BbSelectItem>
                            </BbSelectContent>
                        </BbSelect>
                    </div>

                    <div class="space-y-2">
                        <label class="text-sm font-medium">Quantity</label>
                        <BbNumericInput @bind-Value="quantity" Min="1" Max="10" />
                    </div>

                    <div class="flex gap-2">
                        <BbButton class="flex-1">
                            <!-- shopping-cart icon SVG -->
                            Add to Cart
                        </BbButton>
                        <BbButton Variant="ButtonVariant.Outline" Size="ButtonSize.Icon">
                            <!-- heart icon SVG -->
                        </BbButton>
                    </div>
                </div>
            </div>
        </BbCardContent>
    </BbCard>
</div>

@code {
    private string selectedSize = "Medium";
    private int quantity = 1;
}