<template> <router-link :to="`/actor/${actor.id}/${actor.slug}`" class="actor nolink" > <div class="avatar"> <img v-if="actor.avatar" :src="getPath(actor.avatar, 'lazy')" class="avatar-image" > <Icon v-else-if="actor.gender" :icon="actor.gender" class="avatar-fallback" /> </div> <span class="name">{{ actor.name }}</span> </router-link> </template> <script> async function unstashActor(actorId, stashId) { await this.$store.dispatch('unstashActor', { actorId, stashId }); } export default { props: { actor: { type: Object, default: null, }, stash: { type: Object, default: null, }, }, methods: { unstashActor, }, }; </script> <style lang="scss" scoped> .actor { height: 2.5rem; display: inline-flex; align-items: center; border: solid 1px var(--shadow-hint); &:hover { border: solid 1px var(--primary); } } .avatar { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 100%; border-right: solid 1px var(--shadow-hint); } .avatar-image { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; } .avatar-fallback { fill: var(--shadow-weak); } .name { display: inline-flex; align-items: center; height: 100%; padding: 0 .5rem; font-size: .8rem; font-weight: bold; } </style>