fix fav layout, place function for home

src/views/Favorite.vue

@@ -1,12 +1,37 @@
 <template>
-  <div>
+    <!-- <h1>Favorites</h1> -->
-    <h1>Favorites</h1>
+    <!-- แสดงข้อมูล favorites ตามความเหมาะสม -->
-    <ul class="favorite-list">
+    <!-- <ul class="favorite-list">
       <li v-for="(favorite, index) in favorite" :key="index" class="favorite-item">
-        {{ favorite.place_name }} <!-- แสดงข้อมูล favorites ตามความเหมาะสม -->
+        {{ favorite.place_name }}
       </li>
-    </ul>
+    </ul> -->
-  </div>
+
+    <v-card
+    class="mx-auto fav-card">
+
+      <v-list lines="two">
+        <v-list-item
+          v-for="(favorite, index) in favorite"
+          :key="index"
+          @click="handleClick(favorite)"
+          >
+
+        <!-- <template v-slot:prepend>
+          <v-icon class="icon-pin"></v-icon>
+        </template> -->
+
+        <template v-slot:prepend>
+              <v-icon class="icon-pin"></v-icon>
+          </template>
+
+          <v-list-item-content>
+            <v-list-item-title>{{ favorite.place_name }}</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+
+    </v-card>
 </template>
 
 <script>
@@ -33,6 +58,11 @@ export default {
       } catch (error) {
         console.error(error);
       }
+
+      const handleClick = (favorite) => {
+      console.log('Clicked:', favorite);
+    };
+
     });
 
     return {
@@ -44,7 +74,7 @@ export default {
 
 <style>
 /* CSS เพื่อแสดงแต่ละข้อมูลเป็น block */
-.favorite-list {
+/* .favorite-list {
   list-style-type: none;
   padding: 0;
 }
@@ -54,5 +84,21 @@ export default {
   padding: 10px;
   border: 1px solid #ccc;
   margin-bottom: 5px;
+} */
+
+.icon-pin{
+  background-color: black;
+  -webkit-mask: url(icons/Adwaita/pin.svg) no-repeat center;
+  mask: url(icons/Adwaita/pin.svg) no-repeat center;
+
+}
+
+.fav-card
+{
+  margin-top: 2vh;
+  max-width: 90vw;
+  border-radius: 12px;
+  background-color: rgba(255, 255, 255, 1);
+  box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13);
 }
 </style>