<div class="flex flex-wrap md:inline-grid md:grid-cols-3 gap-4">
    @foreach( var placement in _placements )
    {
        <LumexPopover Placement="@placement">
            <LumexPopoverTrigger Color="@ThemeColor.Danger"
                                 Variant="@Variant.Flat"
                                 Class="capitalize">
                @placement.ToDescription().Replace( "-", " " )
            </LumexPopoverTrigger>
            <LumexPopoverContent>
                <div class="px-1 py-2">
                    <div class="text-small font-bold">Oh, hi there!</div>
                    <div class="text-tiny">I am the popover content</div>
                </div>
            </LumexPopoverContent>
        </LumexPopover>
    }
</div>

@code {
    private readonly PopoverPlacement[] _placements = [
        PopoverPlacement.TopStart,
        PopoverPlacement.Top,
        PopoverPlacement.TopEnd,
        PopoverPlacement.RightStart,
        PopoverPlacement.Right,
        PopoverPlacement.RightEnd,
        PopoverPlacement.BottomStart,
        PopoverPlacement.Bottom,
        PopoverPlacement.BottomEnd,
        PopoverPlacement.LeftStart,
        PopoverPlacement.Left,
        PopoverPlacement.LeftEnd
    ];
}