20 lines
852 B
Vue
20 lines
852 B
Vue
<script setup lang="ts">
|
|
defineProps<{ title: string, books: WishlistShelfBook[], total: number }>()
|
|
</script>
|
|
|
|
<template>
|
|
<section class="mt-16 border-t border-default pt-8">
|
|
<h2 class="mb-6 text-xl font-semibold text-highlighted">
|
|
{{ title }}
|
|
<span class="text-base font-normal text-muted tabular-nums">{{ books.length === total ? total : `${books.length} / ${total}` }}</span>
|
|
</h2>
|
|
|
|
<ul class="columns-1 gap-x-8 sm:columns-2 lg:columns-3">
|
|
<li v-for="book in books" :key="book.id" class="mb-3 break-inside-avoid text-sm leading-snug sm:mb-2">
|
|
<span class="block text-highlighted sm:inline">{{ book.title }}</span>
|
|
<span v-if="book.authors.length" class="block text-muted sm:ms-1.5 sm:inline">{{ book.authors.map(wishlistAuthorName).join(', ') }}</span>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</template>
|