@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="Scrollable List" Code="@_codeScrollArea">
    <ScrollArea Class="h-48 w-full max-w-xs rounded-md border border-border">
        <Stack Gap="2" Class="p-4">
            @foreach (var tag in new[] { "Radix UI", "Tailwind CSS", "Blazor", "ASP.NET", "C#", "TypeScript", "React", "Vue", "Svelte", "Next.js", "Nuxt", "Remix" })
            {
                <Flex Gap="2" Align="center" Class="text-sm text-foreground py-1">
                    <DynamicIcon Name="Tag" Class="h-3.5 w-3.5 text-muted-foreground" />
                    @tag
                </Flex>
            }
        </Stack>
    </ScrollArea>
</PatternCard>
</Stack>

@code {
    private string _codeScrollArea = @"<ScrollArea Class=""h-48 w-full rounded-md border border-border"">
    <div class=""p-4 space-y-2"">
        @foreach (var tag in _tags)
        {
            <div class=""flex items-center gap-2 text-sm"">
                <Blazicon Svg=""Lucide.Tag"" class=""h-3.5 w-3.5 text-muted-foreground"" />
                @tag
            </div>
        }
    </div>
</ScrollArea>";
}
