feat: add product card UI

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

@@ -0,0 +1,43 @@
+<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)'}`"
+    @click="console.log('clicked!')"
+  >
+    <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">+ {{ $t(label) }}</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.hover-card:hover {
+  cursor: pointer;
+  opacity: 0.8;
+}
+</style>

src/components/04_product-service/ProductCardComponent.vue

@@ -12,7 +12,7 @@ withDefaults(
     date?: Date;
   }>(),
   {
-    color: 'var(--brand-2)',
+    color: 'var(--brand-1)',
   },
 );
 </script>