<script setup lang="ts">
defineProps<{
    participants: Array<{
        id: number;
        name: string;
    }>;
}>();
</script>

<template>
    <div class="mt-8">
        <h4 class="text-lg font-medium text-gray-900 dark:text-gray-100">
            Participants
        </h4>
        <ul class="mt-4 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
            <li
                v-for="participant in participants"
                :key="participant.id"
                class="overflow-hidden bg-white p-4 shadow-sm sm:rounded-lg dark:bg-gray-800"
            >
                {{ participant.name }}
            </li>
        </ul>
    </div>
</template>
