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

const store = useWarrenStore();
</script>

<template>
    <ScrollArea class="w-full h-full">
        <div class="flex flex-row gap-2">
            <NuxtLink
                v-for="(warren, uuid) in store.warrens"
                :key="uuid"
                :to="`/warrens/${uuid}`"
            >
                <Button class="w-44 h-12" variant="outline" size="lg">
                    <Icon name="lucide:folder-root" />
                    <span clas="truncate">{{ warren.name }}</span>
                </Button>
            </NuxtLink>
        </div>
    </ScrollArea>
</template>
