<script setup lang="ts">
import { onMounted } from 'vue';
import ModStoreEntry from './ModStoreEntry.vue';
import { usePkgStore } from '../stores';

const pkgs = usePkgStore();

onMounted(() => {
    pkgs.fetch();
});
</script>

<template>
    <div
        v-for="p in pkgs.allRemote.sort((p1, p2) =>
            p1.name.localeCompare(p2.name)
        )"
        class="flex flex-row"
    >
        <ModStoreEntry :pkg="p" />
    </div>
</template>

<style lang="scss">
@import 'primeicons/primeicons.css';
</style>
