traxxx/assets/components/tile/actor.vue

<template>
    <div
        v-if="actor"
        class="actor"
    >
        <a
            :href="`/actor/${actor.slug}`"
            class="link"
        >
            <span
                v-tooltip.top="actor.name"
                class="name"
            >{{ actor.name }}</span>

            <img
                v-if="actor.avatar"
                :src="`/media/${actor.avatar.thumbnail || actor.avatar}`"
                class="avatar"
            >

            <span
                v-else
                class="avatar"
            >No photo</span>

            <span
                v-if="actor.age || actor.origin"
                class="details"
            >
                <span>
                    <span
                        v-if="actor.age"
                        v-tooltip="`Born on ${formatDate(actor.birthdate, 'MMMM D, YYYY')}`"
                        class="age"
                    >{{ actor.age }}</span>

                    <span
                        v-if="actor.ageThen && actor.ageThen < actor.age"
                        v-tooltip="`${actor.ageThen} years old on release date`"
                        class="age-then"
                    >{{ actor.ageThen }}</span>
                </span>
                <span
                    v-if="actor.origin"
                    v-tooltip="`Born in ${actor.origin.country.alias || actor.origin.country.name}`"
                    class="country"
                >
                    {{ actor.origin.country.alpha2 }}
                    <img
                        class="flag"
                        :src="`/img/flags/${actor.origin.country.alpha2.toLowerCase()}.png`"
                    >
                </span>
            </span>
        </a>
    </div>
</template>

<script>
export default {
    props: {
        actor: {
            type: Object,
            default: null,
        },
    },
};
</script>

<style lang="scss" scoped>
@import 'theme';

.actor {
    width: 10rem;
    background: $background;
    display: inline-block;
    margin: 0 .5rem .5rem 0;
    position: relative;
    box-shadow: 0 0 3px $shadow-weak;
}

.link {
    color: $link;
    text-decoration: none;
    text-align: center;

    &:hover {
        color: $primary;
    }
}

.name {
    display: block;
    padding: .5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
}

.avatar {
    color: $shadow-weak;
    background: $shadow-hint;
    height: 12rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    object-position: 50% 0;
}

.details {
    background: $shadow;
    color: $text-contrast;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: .5rem;
    position: absolute;
    bottom: 0;
    font-size: .8rem;
    font-weight: bold;
}

.age-then {
    color: $highlight;
}
</style>