⭐ feat: add favor state for card card

Author: OlgaPrikhodko

assets/heartFilled.png

@@ -1,11 +1,24 @@
 <script setup>
+import heartFilled from "@/assets/heartFilled.png";
+import heartOutline from "@/assets/heartOutline.png";
+
 const props = defineProps({ car: Object });
+
+const favored = useState("favored-${props.car.id}", () => {
+  return false;
+});
 </script>
 
 <template>
   <div
-    class="shadow border w-full overflow-hidden mb-5 cursor-pointer h-[200px]"
+    class="relative shadow border w-full overflow-hidden mb-5 cursor-pointer h-[200px]"
   >
+    <img
+      class="absolute w-7 right-5 top-2 z-20"
+      :src="favored ? heartFilled : heartOutline"
+      alt="heart for adding to favorites"
+      @click="favored = !favored"
+    />
     <div class="flex h-full" @click="navigateTo(`/car/${car.name}-${car.id}`)">
       <NuxtImg :src="car.url" alt="" class="w-[300px] h-full" />
       <div class="p-4 flex flex-col">