LogoCard.vue

<template>
  <v-card
    :max-width="maxWidth || 400"
    :min-height="minHeight || 245"
    :class="!logoCardUrl ? 'ma-4 hvr-no-grow' : 'hvr-grow ma-4'"
    class="card-style"
    v-on:click="navigateTo"
  >
    <div v-if="logoSource" class="mx-auto mt-4 pb-2">
      <v-img
        :src="logoSource"
        class="mx-auto ma-1"
        :width="logoMaxWidth || 125"
      />
    </div>
    <h4 class="subhead mt-2 px-2 w-100">{{ logoCardText }}</h4>
    <v-card-actions v-if="!logoCardUrl">
      <span class="mx-auto">Coming Soon</span>
    </v-card-actions>
  </v-card>
</template>
<script>
export default {
  name: "LogoCard",
  props: {
    maxWidth: String,
    minHeight: String,
    logoSource: String,
    logoMaxWidth: Number,
    logoCardText: String,
    logoCardLink: String,
    logoCardUrl: String,
    logoCardExternalUrl: String,
    logoCardUrlExternalTarget: String,
  },
  methods: {
    navigateTo() {
      if (this.logoCardUrl) {
        this.$router.push({ path: this.logoCardUrl });
      } else if (this.logoCardExternalUrl) {
        window.open(
          this.logoCardExternalUrl,
          this.logoCardExternalUrlTarget || ""
        );
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.hvr-no-grow {
  display: inline-block;
  vertical-align: middle;
  cursor: not-allowed;
}
.card-style {
  max-width: 400px;
}
</style>