ledgerrz/resources/js/components/LedgerList.vue

<script setup lang="ts">
import { Link } from '@inertiajs/vue3';
import { route } from 'ziggy-js';

defineProps<{
    dynamicId: string;
    ledgers: Array<{
        id: string;
        name: string;
        score: number;
        alignment: string;
        media?: Array<{ id: number; url: string; mime_type: string }>;
    }>;
}>();
</script>

<template>
    <div class="c-ledger-list">
        <div class="c-ledger-list__header">
            <h4 class="c-ledger-list__title">Ledgers</h4>
        </div>
        <ul class="c-ledger-list__grid">
            <li
                v-for="ledger in ledgers"
                :key="ledger.id"
                class="c-ledger-list__item"
            >
                <Link
                    :href="
                        route('dynamics.ledgers.show', {
                            dynamic: dynamicId,
                            ledger: ledger.id,
                        })
                    "
                >
                    <h5 class="c-ledger-list__item-name">
                        {{ ledger.name }}
                    </h5>
                    <p class="c-ledger-list__item-score">
                        Score: {{ ledger.score }}
                    </p>

                    <!-- Ledger Alignment Badge -->
                    <div class="c-ledger-list__alignment-wrapper">
                        <span
                            v-if="ledger.alignment === 'positive'"
                            class="c-ledger-list__alignment-badge c-ledger-list__alignment-badge--positive"
                        >
                            ▲ Higher is Better
                        </span>
                        <span
                            v-else-if="ledger.alignment === 'negative'"
                            class="c-ledger-list__alignment-badge c-ledger-list__alignment-badge--negative"
                        >
                            ▼ Lower is Better
                        </span>
                        <span
                            v-else
                            class="c-ledger-list__alignment-badge c-ledger-list__alignment-badge--neutral"
                        >
                            ◆ Neutral
                        </span>
                    </div>

                    <!-- Ledger Media Thumbnails -->
                    <div
                        v-if="ledger.media && ledger.media.length > 0"
                        class="c-ledger-list__media-list"
                    >
                        <div
                            v-for="item in ledger.media"
                            :key="item.id"
                            class="c-ledger-list__media-item"
                        >
                            <img
                                v-if="item.mime_type.startsWith('image/')"
                                :src="item.url"
                                class="c-ledger-list__media-img"
                            />
                            <video
                                v-else-if="item.mime_type.startsWith('video/')"
                                :src="item.url"
                                class="c-ledger-list__media-video"
                            />
                        </div>
                    </div>
                </Link>
            </li>
        </ul>
        <div v-if="ledgers.length === 0" class="c-ledger-list__empty">
            No ledgers found for this dynamic.
        </div>
    </div>
</template>

<style scoped>
@reference "../../css/app.css";

.c-ledger-list {
    @apply mt-8;
}

.c-ledger-list__header {
    @apply mb-6 flex items-center justify-between;
}

.c-ledger-list__title {
    @apply text-lg font-medium;
    color: var(--foreground);
}

.c-ledger-list__grid {
    @apply mt-4 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3;
}

.c-ledger-list__item {
    @apply p-6;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.c-ledger-list__item-name {
    @apply text-lg font-semibold;
    color: var(--foreground);
}

.c-ledger-list__item-score {
    @apply mt-2 text-sm;
    color: var(--muted-foreground);
}

.c-ledger-list__alignment-wrapper {
    @apply mt-2 flex items-center;
}

.c-ledger-list__alignment-badge {
    @apply rounded px-1.5 py-0.5 text-[10px] font-semibold tracking-wide uppercase;
}

.c-ledger-list__alignment-badge--positive {
    @apply bg-green-50/50 text-green-600 dark:bg-green-950/20 dark:text-green-400;
}

.c-ledger-list__alignment-badge--negative {
    @apply bg-red-50/50 text-red-600 dark:bg-red-950/20 dark:text-red-400;
}

.c-ledger-list__alignment-badge--neutral {
    @apply bg-gray-50/50 text-gray-500 dark:bg-neutral-800/20 dark:text-gray-400;
}

.c-ledger-list__media-list {
    @apply mt-2 flex flex-wrap gap-1;
}

.c-ledger-list__media-item {
    @apply relative size-8 overflow-hidden rounded border border-gray-300 bg-black dark:border-gray-600;
}

.c-ledger-list__media-img {
    @apply size-full object-cover;
}

.c-ledger-list__media-video {
    @apply size-full object-cover;
}

.c-ledger-list__empty {
    @apply mt-4 text-gray-500;
}
</style>