scrum-poker-internal/resources/js/components/dashboard/DashboardRoomCard.vue

<script setup lang="ts">
import { CalendarClock, Users } from '@lucide/vue';

import type { DashboardRoomCardProps } from '@/types/dashboard';

withDefaults(defineProps<DashboardRoomCardProps>(), {
    showActions: false,
});

const dateFormatter = new Intl.DateTimeFormat('de-DE', {
    dateStyle: 'medium',
    timeStyle: 'short',
});

function formatDate(value: string | null): string {
    return value ? dateFormatter.format(new Date(value)) : 'Keine Aktivität';
}
</script>

<template>
    <article
        class="flex flex-col rounded-md border border-slate-700 bg-slate-800 p-5 text-slate-100"
    >
        <div class="flex items-start justify-between gap-4">
            <div class="min-w-0">
                <h2 class="text-lg font-semibold break-words">
                    {{ room.title ?? 'Scrum Poker' }}
                </h2>
                <p
                    class="mt-1 font-mono text-sm tracking-[0.18em] text-muted-foreground"
                >
                    {{ room.join_code }}
                </p>
            </div>
            <span
                class="shrink-0 text-sm font-semibold normal-case"
                :class="
                    room.closed_at
                        ? 'text-muted-foreground'
                        : 'text-emerald-600 dark:text-emerald-400'
                "
            >
                {{ room.closed_at ? 'Geschlossen' : 'Aktiv' }}
            </span>
        </div>

        <div class="mt-5 grid grid-cols-2 gap-3 text-sm text-muted-foreground">
            <span class="inline-flex items-center gap-2">
                <Users class="size-4" />
                {{ room.players_count }} Spieler /
                {{ room.active_player_count }} aktiv
            </span>
            <span>Runde {{ room.current_round }}</span>
            <span class="col-span-2 inline-flex items-center gap-2">
                <CalendarClock class="size-4" />
                {{ formatDate(room.last_activity_at) }}
            </span>
        </div>

        <div v-if="showActions" class="mt-6 flex flex-wrap items-center gap-3">
            <slot name="actions"></slot>
        </div>
    </article>
</template>