traxxx/assets/components/actors/preview.vue

<template>
	<RouterLink
		:to="`/actor/${actor.id}/${actor.slug}`"
		:target="target"
		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>
	</RouterLink>
</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,
		},
		target: {
			type: String,
			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>