74 lines
2.6 KiB
Vue
74 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { Link } from '@inertiajs/vue3';
|
|
import { route } from 'ziggy-js';
|
|
|
|
defineProps<{
|
|
dynamicId: number;
|
|
ledgers: Array<{
|
|
id: number;
|
|
name: string;
|
|
score: number;
|
|
media?: Array<{ id: number; url: string; mime_type: string }>;
|
|
}>;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mt-8">
|
|
<div class="mb-6 flex items-center justify-between">
|
|
<h4 class="text-lg font-medium text-gray-900 dark:text-gray-100">
|
|
Ledgers
|
|
</h4>
|
|
</div>
|
|
<ul class="mt-4 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
|
<li
|
|
v-for="ledger in ledgers"
|
|
:key="ledger.id"
|
|
class="border-b border-gray-200 bg-white p-6 dark:border-gray-600 dark:bg-gray-700"
|
|
>
|
|
<Link
|
|
:href="
|
|
route('dynamics.ledgers.show', {
|
|
dynamic: dynamicId,
|
|
ledger: ledger.id,
|
|
})
|
|
"
|
|
>
|
|
<h5 class="text-lg font-semibold">
|
|
{{ ledger.name }}
|
|
</h5>
|
|
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
|
|
Score: {{ ledger.score }}
|
|
</p>
|
|
|
|
<!-- Ledger Media Thumbnails -->
|
|
<div
|
|
v-if="ledger.media && ledger.media.length > 0"
|
|
class="mt-2 flex flex-wrap gap-1"
|
|
>
|
|
<div
|
|
v-for="item in ledger.media"
|
|
:key="item.id"
|
|
class="relative size-8 overflow-hidden rounded border border-gray-300 bg-black dark:border-gray-600"
|
|
>
|
|
<img
|
|
v-if="item.mime_type.startsWith('image/')"
|
|
:src="item.url"
|
|
class="size-full object-cover"
|
|
/>
|
|
<video
|
|
v-else-if="item.mime_type.startsWith('video/')"
|
|
:src="item.url"
|
|
class="size-full object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
<div v-if="ledgers.length === 0" class="mt-4 text-gray-500">
|
|
No ledgers found for this dynamic.
|
|
</div>
|
|
</div>
|
|
</template>
|