98 lines
2.4 KiB
Vue
98 lines
2.4 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;
|
|
alignment: string;
|
|
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="c-dynamic-show">
|
|
<div class="c-dynamic-show__container">
|
|
<div class="c-dynamic-show__card">
|
|
<div class="c-dynamic-show__body">
|
|
<h3 class="c-dynamic-show__title">{{ dynamic.name }}</h3>
|
|
<p class="c-dynamic-show__rules">
|
|
{{ 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>
|
|
|
|
<style scoped>
|
|
@reference "../../../css/app.css";
|
|
|
|
.c-dynamic-show {
|
|
@apply py-12;
|
|
}
|
|
|
|
.c-dynamic-show__container {
|
|
@apply mx-auto max-w-7xl sm:px-6 lg:px-8;
|
|
}
|
|
|
|
.c-dynamic-show__card {
|
|
@apply overflow-hidden;
|
|
background-color: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.c-dynamic-show__body {
|
|
@apply p-6;
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.c-dynamic-show__title {
|
|
@apply text-lg font-medium;
|
|
}
|
|
|
|
.c-dynamic-show__rules {
|
|
@apply mt-2 text-sm text-gray-600 dark:text-gray-400;
|
|
}
|
|
</style>
|