<template> <router-link :to="`/${entity.type}/${entity.slug}`" :title="entity.name" class="tile" > <template v-if="entity.hasLogo"> <img v-if="entity.type === 'network' || entity.independent" :src="`/img/logos/${entity.slug}/thumbs/network.png`" :alt="entity.name" class="logo" > <img v-else-if="entity.parent" :src="`/img/logos/${entity.parent.slug}/thumbs/${entity.slug}.png`" :alt="entity.name" class="logo" > <img v-else :src="`/img/logos/${entity.slug}/thumbs/${entity.slug}.png`" :alt="entity.name" class="logo" > </template> <span v-else class="name" >{{ entity.name }}</span> </router-link> </template> <script> export default { props: { entity: { type: Object, default: null, }, }, }; </script> <style lang="scss" scoped> @import 'theme'; .tile { height: 6rem; background: var(--tile); display: flex; flex-shrink: 0; justify-content: center; align-items: center; box-sizing: border-box; padding: .5rem 1rem; border-radius: .25rem; box-shadow: 0 0 3px rgba(0, 0, 0, .25); text-align: center; text-decoration: none; } .logo { max-width: 100%; max-height: 100%; display: flex; align-items: center; justify-content: center; } .name { color: var(--text-light); font-size: 1.25rem; font-weight: bold; } </style>