From f153cb4dfc71856e64f5385582c146de046a0a49 Mon Sep 17 00:00:00 2001
From: Sergey Krylov <ksv741@mail.ru>
Date: Wed, 22 Jan 2025 06:55:49 +0300
Subject: [PATCH] add cart drawer

---
 src/App.vue                     |  2 ++
 src/components/Card.vue         |  6 +++---
 src/components/CartItem.vue     | 14 ++++++++++++++
 src/components/CartItemList.vue | 12 ++++++++++++
 src/components/Drawer.vue       | 33 +++++++++++++++++++++++++++++++++
 src/components/DrawerHead.vue   | 10 ++++++++++
 src/utils/helpers.js            |  1 +
 7 files changed, 75 insertions(+), 3 deletions(-)
 create mode 100644 src/components/CartItem.vue
 create mode 100644 src/components/CartItemList.vue
 create mode 100644 src/components/Drawer.vue
 create mode 100644 src/components/DrawerHead.vue
 create mode 100644 src/utils/helpers.js

diff --git a/src/App.vue b/src/App.vue
index eb23566..d37664c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,10 @@
 <script setup>
   import Header from '@/components/Header.vue'
   import CardList from '@/components/CardList.vue'
+  import Drawer from '@/components/Drawer.vue'
 </script>
 <template>
+<!--  <Drawer/>-->
   <div
     class="mt-14 w-4/5 mx-auto bg-white rounded-xl shadow-xl"
   >
diff --git a/src/components/Card.vue b/src/components/Card.vue
index 7b6b3b7..2db31c7 100644
--- a/src/components/Card.vue
+++ b/src/components/Card.vue
@@ -1,4 +1,6 @@
 <script setup>
+  import { decimalFormatter } from '@/utils/helpers.js'
+
   defineProps({
     imageUrl: String,
     title: String,
@@ -8,8 +10,6 @@
     onClickAdd: Function,
     onClickFavorite: Function,
   });
-
-  const formatter = new Intl.NumberFormat('ru-RU', { style: 'decimal' });
 </script>
 
 <template>
@@ -27,7 +27,7 @@
     <div class="flex justify-between mt-5">
       <div class="flex flex-col">
         <span class="text-slate-400 uppercase">Цена:</span>
-        <b>{{formatter.format(price)}} руб.</b>
+        <b>{{decimalFormatter.format(price)}} руб.</b>
       </div>
 
       <img @click="onClickAdd" :src="isAdded ? '/checked.svg' : '/plus.svg'" alt="Add">
diff --git a/src/components/CartItem.vue b/src/components/CartItem.vue
new file mode 100644
index 0000000..9907eea
--- /dev/null
+++ b/src/components/CartItem.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="w-full border border-slate-100 p-4 rounded-xl flex items-center gap-4">
+    <img class="w-16" src="/sneakers/sneakers-1.jpg" alt="Sneaker">
+
+    <div class="flex flex-col justify-between">
+      <p>Мужские кроссовки Nike Blazer Mid Suede</p>
+
+      <div class="flex justify-between mt-2">
+        <b>12 990 руб.</b>
+        <img src="/close.svg" alt="Close" class="cursor-pointer transition opacity-40 hover:opacity-100">
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/CartItemList.vue b/src/components/CartItemList.vue
new file mode 100644
index 0000000..49b2aed
--- /dev/null
+++ b/src/components/CartItemList.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+  import CartItem from './CartItem.vue'
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <CartItem/>
+    <CartItem/>
+    <CartItem/>
+    <CartItem/>
+  </div>
+</template>
diff --git a/src/components/Drawer.vue b/src/components/Drawer.vue
new file mode 100644
index 0000000..5163902
--- /dev/null
+++ b/src/components/Drawer.vue
@@ -0,0 +1,33 @@
+<script setup>
+  import DrawerHead from './DrawerHead.vue'
+  import CartItemList from '@/components/CartItemList.vue'
+</script>
+
+<template>
+  <div class="fixed top-0 left-0 h-full w-full bg-black z-10 opacity-75">
+  </div>
+
+  <div class="bg-white w-96 h-full fixed top-0 right-0 z-20 p-8">
+    <DrawerHead/>
+
+    <CartItemList />
+
+    <div class="flex flex-col gap-2 my-6">
+      <div class="flex justify-between gap-2">
+        <span>Итого:</span>
+        <div class="flex-1 border-b border-dashed"></div>
+        <b>12 990 руб.</b>
+      </div>
+
+      <div class="flex justify-between gap-2">
+        <span>Налог 5%:</span>
+        <div class="flex-1 border-b border-dashed"></div>
+        <b>900 руб.</b>
+      </div>
+
+      <button class="mt-5 bg-lime-500 w-full rounded-xl py-3 text-white transition disabled:bg-slate-300 hover:bg-lime-600 active:bg-lime-700">
+        Оформить заказ
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/src/components/DrawerHead.vue b/src/components/DrawerHead.vue
new file mode 100644
index 0000000..ff788a6
--- /dev/null
+++ b/src/components/DrawerHead.vue
@@ -0,0 +1,10 @@
+<template>
+  <div class="flex items-center gap-5 mb-5">
+    <svg class="opacity-30 cursor-pointer rotate-180 transition hover:translate-x-1 hover:opacity-100" width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M1 7H14.7143" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M8.71436 1L14.7144 7L8.71436 13" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+
+    <h2 class="text-2xl font-bold">Корзина</h2>
+  </div>
+</template>
diff --git a/src/utils/helpers.js b/src/utils/helpers.js
new file mode 100644
index 0000000..8295388
--- /dev/null
+++ b/src/utils/helpers.js
@@ -0,0 +1 @@
+export const decimalFormatter = new Intl.NumberFormat('ru-RU', { style: 'decimal' });