From 7f2d0ccc9d0526e798579fb508821ac6a2db9f2d Mon Sep 17 00:00:00 2001
From: Sergey Krylov <ksv741@mail.ru>
Date: Mon, 27 Jan 2025 07:11:15 +0300
Subject: [PATCH] refactor: improve empty cart

---
 src/components/Drawer.vue    | 13 ++++++++++---
 src/components/InfoBlock.vue | 30 ++++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 3 deletions(-)
 create mode 100644 src/components/InfoBlock.vue

diff --git a/src/components/Drawer.vue b/src/components/Drawer.vue
index 698d092..2d405df 100644
--- a/src/components/Drawer.vue
+++ b/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>
diff --git a/src/components/InfoBlock.vue b/src/components/InfoBlock.vue
new file mode 100644
index 0000000..f037bef
--- /dev/null
+++ b/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>