cloudron-box/dashboard/src/components/PreviewPanel.vue

<template>
  <div class="preview-panel">
    <img :src="item.previewUrl || item.icon" :alt="item.name" :class="{'shadow': item.previewUrl }" @error="iconError($event)"/>
    <p>{{ item.name }}</p>
  </div>
</template>

<script>

export default {
  name: 'PreviewPanel',
  props: {
    item: Object,
    fallbackIcon: String
  },
  methods: {
    iconError(event) {
      event.target.src = this.fallbackIcon;
    }
  }
};

</script>

<style scoped>

.preview-panel {
  padding: 0 30px;
  display: flex;
  flex-direction: column;
}

.preview-panel > img {
  min-width: 90%;
  max-width: 256px;
  margin: auto;
}

.shadow {
  box-shadow: 0 2px 5px rgba(0,0,0,.2);
}

.preview-panel > p {
  text-align: center;
  font-size: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
}

</style>