From 0a845e6d4e500e5d60eba27e34d6caf75c45c999 Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Tue, 11 Jun 2024 12:00:53 +0700
Subject: [PATCH] feat: add hover + on click (emit)

---
 .../ProductCardComponent.vue                   | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/04_product-service/ProductCardComponent.vue b/src/components/04_product-service/ProductCardComponent.vue
index f2a6fa31..6961ac19 100644
--- a/src/components/04_product-service/ProductCardComponent.vue
+++ b/src/components/04_product-service/ProductCardComponent.vue
@@ -18,7 +18,11 @@ withDefaults(
 </script>
 
 <template>
-  <div class="full-width rounded" :style="`border:1px solid ${color}`">
+  <div
+    class="full-width rounded hover-card"
+    :style="`border:1px solid ${color}`"
+    @click="$emit('onClick')"
+  >
     <div class="q-pa-md row justify-between items-center">
       <q-btn
         round
@@ -27,7 +31,11 @@ withDefaults(
         flat
         :style="`color:${color};background-color:var(--surface-0)`"
       />
-      <AllAroundBtn :label="'viewDetail'" :color="color" />
+      <AllAroundBtn
+        :label="'viewDetail'"
+        :color="color"
+        @view-detail="$emit('viewDetail')"
+      />
     </div>
     <div class="q-px-md">
       <div class="text-subtitle1 text-bold">{{ title }}</div>
@@ -70,4 +78,10 @@ withDefaults(
   border-radius: 0 0 var(--radius-2) var(--radius-2);
   font-size: 16px;
 }
+
+.hover-card:hover {
+  cursor: pointer;
+  opacity: 0.8;
+  box-shadow: var(--shadow-3);
+}
 </style>