refactor: improve empty cart

src/components/Drawer.vue

@@ -3,6 +3,7 @@
   import CartItemList from '@/components/CartItemList.vue'
   import { inject, onMounted, onUnmounted } from 'vue'
   import { decimalFormatter } from '@/utils/helpers.js'
+  import InfoBlock from '@/components/InfoBlock.vue'
 
   const {
     closeDrawer,
@@ -66,9 +67,15 @@
       </div>
     </div>
 
-    <h2 v-else class="text-lg font-bold text-center mt-10 text-slate-500">
-      В корзине нет товаров
-    </h2>
+    <InfoBlock
+      v-else
+      title="Корзина пуста"
+      description="Добавьте хотябы одну пару кроссовок, чтобы сделать заказ"
+      image-url="/package-icon.png"
+    />
+<!--    <h2 v-else class="text-lg font-bold text-center mt-10 text-slate-500">-->
+<!--      В корзине нет товаров-->
+<!--    </h2>-->
 
   </div>
 </template>

src/components/InfoBlock.vue

@@ -0,0 +1,30 @@
+<script setup>
+  defineProps({
+    title: String,
+    description: String,
+    imageUrl: String
+  })
+
+</script>
+
+<template>
+  <div class="flex flex-col items-center text-center justify-center w-72 mx-auto h-full">
+    <img
+      width="70"
+      :src="imageUrl"
+      alt="Info image"
+    >
+
+    <h2
+      class="mt-4 text-2xl font-medium"
+    >
+      {{title}}
+    </h2>
+
+    <p
+      class="text-gray-400 mt-2"
+    >
+      {{ description }}
+    </p>
+  </div>
+</template>