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="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/runtime-core";
  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()

  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>