<template> <a :href="`/${entity.type}/${entity.slug}`" class="entity" > <img v-if="entity.hasLogo" :src="entity.isIndependent ? `/logos/${entity.slug}/entity.png` : `/logos/${entity.parent?.slug}/${entity.slug}.png`" :alt="entity.name" class="logo" > <span v-else>{{ entity.name }}</span> </a> </template> <script setup> defineProps({ entity: { type: Object, default: null, }, }); </script> <style scoped> .entity { width: 15rem; height: 6rem; display: flex; justify-content: center; align-items: center; box-sizing: border-box; padding: 1rem; border-radius: .5rem; background: var(--grey-dark-40); color: var(--text-light); font-size: 1.25rem; font-weight: bold; &:hover { box-shadow: 0 0 3px var(--shadow); } } .logo { height: 100%; width: 100%; object-fit: contain; } </style>