scrum-poker-internal/resources/js/components/FavoriteRooms.vue

<script setup lang="ts">
import { Link } from '@inertiajs/vue3';
import { DoorOpen } from '@lucide/vue';

import DashboardRoomCard from '@/components/dashboard/DashboardRoomCard.vue';
import { show } from '@/routes/room';
import type { FavoriteRoomListProps } from '@/types/dashboard';

defineProps<FavoriteRoomListProps>();
</script>

<template>
    <section class="flex flex-col gap-6">
        <div>
            <h2 class="text-2xl font-bold tracking-tight">Meine Favoriten</h2>
            <p class="mt-1 text-sm text-muted-foreground">
                Deine favorisierten Scrum-Poker-Räume auf einen Blick.
            </p>
        </div>

        <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
            <DashboardRoomCard
                v-for="room in favoriteRooms"
                :key="room.id"
                :room="room"
                :show-actions="!room.closed_at"
            >
                <template #actions>
                    <Link
                        :href="show(room.id)"
                        class="inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold transition hover:bg-blue-500/80"
                    >
                        <DoorOpen class="size-4" />
                        Raum beitreten
                    </Link>
                </template>
            </DashboardRoomCard>
        </div>
    </section>
</template>