<script setup lang="ts">
import { ScrollArea } from '@/components/ui/scroll-area';

const warrens = ['Thyr', 'Serc'];
</script>

<template>
    <ScrollArea class="w-full h-full">
        <div class="flex flex-row gap-2">
            <Button
                v-for="(warren, i) in warrens"
                :key="i"
                class="w-36 h-12"
                variant="outline"
                size="lg"
                as-child
            >
                <NuxtLink
                    class="flex flex-row items-center gap-1.5"
                    :to="`/warrens/${warren}`"
                >
                    <Icon name="lucide:folder-root" />
                    {{ warren }}
                </NuxtLink>
            </Button>
        </div>
    </ScrollArea>
</template>
