Caramel-CRM/resources/js/pages/Achievements.vue

<script setup lang="ts">
import Heading from '@/components/Heading.vue';
import PlaceholderPattern from '../components/PlaceholderPattern.vue';
import AppLayout from '@/layouts/AppLayout.vue';
</script>

<template>

    <AppLayout title="Erfolge">
        <div>
            <Heading title="Kategorie" description="3 von 10 freigeschaltet" />

            <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>
    </AppLayout>
</template>