<script setup lang="ts">
import AppLayout from '@/layouts/AppLayout.vue';
import { achievements } from '@/routes';
import { Head } from '@inertiajs/vue3';
import PlaceholderPattern from '../components/PlaceholderPattern.vue';
</script>

<template>

    <Head title="Erfolge" />

    <AppLayout>
        <div class="flex h-full flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-4">

            <div>
                <h1 class="text-xl">Kategorie</h1>
                <h2 class="text-sm text-neutral-400 mb-4">3 von 10 freigeschaltet</h2>

                <div class="flex flex-row flex-wrap gap-4">
                    <div v-for="n in 10" class="relative flex flex-col items-center">
                        <div
                            class="w-48 relative aspect-square overflow-hidden rounded-full border border-sidebar-border/70 dark:border-sidebar-border">
                            <PlaceholderPattern />
                        </div>
                        <label class="">Erfolg {{ n
                            }}</label>
                    </div>
                </div>
            </div>

        </div>
    </AppLayout>
</template>
