jws-frontend/src/components/04_product-service/NewProductCardComponent.vue

<script setup lang="ts">
import AppBox from 'components/app/AppBox.vue';
import { onMounted } from 'vue';

withDefaults(
  defineProps<{
    label: string;
    color?: string;
    isType?: boolean;
  }>(),
  {
    color: 'var(--brand-1)',
    isType: false,
  },
);
</script>

<template>
  <div
    class="q-pa-lg full-width rounded column items-center hover-card"
    :style="`border:2px dashed ${isType ? 'var(--purple-11)' : 'var(--pink-6)'};flex-grow:1`"
    @click="$emit('onClick')"
  >
    <q-img
      style="height: 140px; max-width: 170px"
      :src="isType ? 'product-type.png' : 'product-group.png'"
    />

    <div
      class="items-center rounded q-px-lg q-mt-md"
      :style="`border:1px solid  ${isType ? 'var(--purple-11)' : 'var(--pink-6)'};background-color: ${isType ? 'var(--purple-11)' : 'var(--pink-6)'}`"
    >
      <div class="text-white text-no-wrap">+ {{ $t(label) }}</div>
    </div>
  </div>
</template>

<style scoped>
.hover-card:hover {
  cursor: pointer;
  opacity: 0.8;
  box-shadow: var(--shadow-3);
}
</style>