67 lines
1.9 KiB
Vue
67 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { Head } from '@inertiajs/vue3';
|
|
import { route } from 'ziggy-js';
|
|
import Chat from '@/components/Chat.vue';
|
|
import CreateLedgerForm from '@/components/CreateLedgerForm.vue';
|
|
import LedgerList from '@/components/LedgerList.vue';
|
|
import ParticipantsList from '@/components/ParticipantsList.vue';
|
|
|
|
const props = defineProps<{
|
|
dynamic: {
|
|
id: number;
|
|
name: string;
|
|
rules: string;
|
|
chat: any;
|
|
participants: Array<{ id: number; name: string }>;
|
|
ledgers: Array<{
|
|
id: number;
|
|
name: string;
|
|
score: number;
|
|
media?: Array<{ id: number; url: string; mime_type: string }>;
|
|
}>;
|
|
};
|
|
}>();
|
|
|
|
const breadcrumbs = [
|
|
{
|
|
name: 'Dynamics',
|
|
href: route('dynamics.index'),
|
|
},
|
|
{
|
|
name: props.dynamic.name,
|
|
href: route('dynamics.show', props.dynamic.id),
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<Head :title="dynamic.name" />
|
|
|
|
<div class="py-12">
|
|
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
|
|
<div
|
|
class="overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800"
|
|
>
|
|
<div class="p-6 text-gray-900 dark:text-gray-100">
|
|
<h3 class="text-lg font-medium">{{ dynamic.name }}</h3>
|
|
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
|
|
{{ dynamic.rules }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dynamic Chat -->
|
|
<Chat :chat="dynamic.chat" />
|
|
|
|
<!-- Participants Component -->
|
|
<ParticipantsList :participants="dynamic.participants" />
|
|
|
|
<!-- Ledgers List Component -->
|
|
<LedgerList :dynamic-id="dynamic.id" :ledgers="dynamic.ledgers" />
|
|
|
|
<!-- Create Ledger Form Component -->
|
|
<CreateLedgerForm :dynamic-id="dynamic.id" />
|
|
</div>
|
|
</div>
|
|
</template>
|