PronounsPage/components/Endorsements.vue

<template>
    <section v-if="config.links.endorsements && Object.keys(config.links.endorsements).length">
        <h2 class="mb-3">
            <Icon v="badge-check" />
            <T>links.endorsements</T>
        </h2>
        <div class="row">
            <div v-for="(book, key) in config.links.endorsements" :key="key" class="col-12 col-lg-6 mb-4">
                <img :src="`/img-local/mecenat/${key}.png`" class="mw-100 shadow me-3 mb-2 float-start w-50">
                <h3 class="h4">
                    <a v-if="book.link" :href="book.link" target="_blank" rel="noopener">{{ book.title }}</a>
                    <span v-else>{{ book.title }}</span>
                </h3>
                <p v-if="book.author" class="mb-1">
                    <Icon v="user" />
                    {{ book.author }}
                </p>
                <p v-if="book.publisher" class="small">
                    <Icon v="building" />
                    {{ book.publisher }}
                </p>
                <p v-for="p in book.description" class="small">
                    <LinkedText :text="p" />
                </p>
                <p v-if="book.review">
                    <nuxt-link
                        :to="`/${config.links.blogRoute}/${book.review}`"
                        class="btn btn-outline-primary btn-sm d-block-force"
                    >
                        <Icon v="file-check" />
                        <T>links.review</T>
                    </nuxt-link>
                </p>
            </div>
        </div>
    </section>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

import useConfig from '../composables/useConfig.ts';

export default defineComponent({
    setup() {
        return {
            config: useConfig(),
        };
    },
});
</script>