app/components/Layout/Header/UniversalCreation/Card.vue

<!--
  VCard proposant une option dans la boite de dialogue "Assistant de création"

  La carte peut prendre en paramètres des options `to` et `href` :
  Si `to` est défini et pas `href`, la carte mène simplement à un nouveau menu dans le wizard.
  Si `href` est défini, et pas `to`, la carte se comporte comme un lien, et doit rediriger la page vers `href` au clic.
  Enfin, si les deux sont définis, l'url est envoyée au composant parent pour être mémorisée, et la carte mène ensuite à
  un nouveau menu dans le wizard, qui permettra d'affiner l'url, par exemple en lui ajoutant une query.
-->

<template>
  <v-card
    class="col-md-6"
    color=""
    :flat="true"
    border="solid 1px"
    @click="onClick"
  >
    <v-row :no-gutters="true" :style="mdAndUp ? 'height: 100px' : ''">
      <v-col cols="3" class="flex-grow-0 flex-shrink-0 d-flex justify-center">
        <v-icon
          :icon="icon"
          size="50"
          class="ma-2 pa-2 align-self-center text-neutral-strong"
        />
      </v-col>

      <v-col
        cols="9"
        align-self="center"
        class="pl-2 infos-container flex-grow-1 flex-shrink-1"
      >
        <h4 class="text-primary">
          {{ $t(title) }}
        </h4>

        <p class="text-neutral-strong">
          {{ $t(textContent) }}
        </p>
      </v-col>
    </v-row>
  </v-card>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'
import { useDisplay } from 'vuetify'
import { MENU_LINK_TYPE } from '~/types/enum/layout'
import { useAdminUrl } from '~/composables/utils/useAdminUrl'
import UrlUtils from '~/services/utils/urlUtils'

const props = defineProps({
  /**
   * Target location in the wizard
   */
  to: {
    type: String,
    required: false,
    default: null,
  },
  /**
   * Target url
   */
  href: {
    type: String,
    required: false,
    default: null,
  },
  /**
   * Target url
   */
  linkType: {
    type: Number as PropType<MENU_LINK_TYPE>,
    required: false,
    default: MENU_LINK_TYPE.V1,
  },
  /**
   * Title displayed on the card
   */
  title: {
    type: String,
    required: true,
  },
  /**
   * Description displayed on the card
   */
  textContent: {
    type: String,
    required: true,
  },
  /**
   * Icon displayed on the card
   */
  icon: {
    type: String,
    required: true,
  },
})

const emit = defineEmits(['click'])

const { makeAdminUrl } = useAdminUrl()

const { mdAndUp } = useDisplay()

let url: string | null = null

if (props.href !== null) {
  switch (props.linkType) {
    case MENU_LINK_TYPE.V1:
      url = makeAdminUrl(props.href)
      break
    case MENU_LINK_TYPE.EXTERNAL:
      url = UrlUtils.prependHttps(props.href)
      break
    default:
      url = props.href
  }
}

const onClick = () => {
  emit('click', props.to, url)
}
</script>

<style lang="scss" scoped>
h4 {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 6px;
}

p {
  font-size: 13px;
}

.infos-container {
  padding: 15px 0;
}

.v-card:hover {
  cursor: pointer;
  background: rgb(var(--v-theme-primary-alt));
}
</style>