<script setup lang="ts">
import { ScrollArea } from '@/components/ui/scroll-area';
import type { DirectoryEntry } from '#shared/types';
const { entries } = defineProps<{
    entries: DirectoryEntry[];
}>();

const { isLoading } = useLoadingIndicator();

const sortedEntries = computed(() =>
    entries.toSorted((a, b) => a.name.localeCompare(b.name))
);
</script>

<template>
    <ScrollArea class="h-full w-full">
        <div class="flex flex-row flex-wrap gap-2">
            <DirectoryEntry
                v-for="entry in sortedEntries"
                :key="entry.name"
                :entry="entry"
                :disabled="isLoading"
            />
        </div>
    </ScrollArea>
</template>
