From 529e1446ee7477bd882f9ede28c2f2c359c20448 Mon Sep 17 00:00:00 2001
From: Sergey Krylov <ksv741@mail.ru>
Date: Wed, 22 Jan 2025 06:16:37 +0300
Subject: [PATCH] add card and card list

---
 src/App.vue                 |  9 ++++++++-
 src/components/Card.vue     | 39 +++++++++++++++++++++++++++++++++++++
 src/components/CardList.vue | 23 ++++++++++++++++++++++
 src/components/Header.vue   |  2 +-
 4 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Card.vue
 create mode 100644 src/components/CardList.vue

diff --git a/src/App.vue b/src/App.vue
index 50683be..eb23566 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,17 @@
 <script setup>
   import Header from '@/components/Header.vue'
+  import CardList from '@/components/CardList.vue'
 </script>
 <template>
   <div
-    class="mt-14 w-4/5 mx-auto bg-white h-screen rounded-xl shadow-xl"
+    class="mt-14 w-4/5 mx-auto bg-white rounded-xl shadow-xl"
   >
     <Header/>
+
+    <div class="p-10">
+      <h2 class="text-3xl font-bold mb-8">Все кроссовки</h2>
+
+      <CardList/>
+    </div>
   </div>
 </template>
diff --git a/src/components/Card.vue b/src/components/Card.vue
new file mode 100644
index 0000000..7b6b3b7
--- /dev/null
+++ b/src/components/Card.vue
@@ -0,0 +1,39 @@
+<script setup>
+  defineProps({
+    imageUrl: String,
+    title: String,
+    price: Number,
+    isAdded: Boolean,
+    isFavorite: Boolean,
+    onClickAdd: Function,
+    onClickFavorite: Function,
+  });
+
+  const formatter = new Intl.NumberFormat('ru-RU', { style: 'decimal' });
+</script>
+
+<template>
+  <div class="relative border bg-white border-slate-100 rounded-3xl p-8 cursor-pointer transition hover:-translate-y-2 hover:shadow-xl">
+    <img
+      :src="isFavorite ? '/like-2.svg' : '/like-1.svg'"
+      alt="Like"
+      class="absolute top-8 left-8"
+      @click="onClickFavorite"
+    >
+
+    <img :src="imageUrl" alt="Sneaker">
+    <p class="mt-2">{{title}}</p>
+
+    <div class="flex justify-between mt-5">
+      <div class="flex flex-col">
+        <span class="text-slate-400 uppercase">Цена:</span>
+        <b>{{formatter.format(price)}} руб.</b>
+      </div>
+
+      <img @click="onClickAdd" :src="isAdded ? '/checked.svg' : '/plus.svg'" alt="Add">
+    </div>
+  </div>
+</template>
+
+
+
diff --git a/src/components/CardList.vue b/src/components/CardList.vue
new file mode 100644
index 0000000..2040053
--- /dev/null
+++ b/src/components/CardList.vue
@@ -0,0 +1,23 @@
+<script setup>
+  import Card from './Card.vue'
+
+  const onClickAdd = () => {
+    alert('Добавлено в корзину')
+  }
+
+  const onClickFavorite = () => {
+    alert('Добавлено в Избранное')
+  }
+</script>
+
+<template>
+  <div class="grid grid-cols-4 gap-5">
+    <Card
+      image-url="/sneakers/sneakers-1.jpg"
+      title="Мужские кроссовки Nike Blazer Mid Suede"
+      :price="12999"
+      :on-click-add="onClickAdd"
+      :on-click-favorite="onClickFavorite"
+    />
+  </div>
+</template>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 01a20dc..9dd07f6 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <header
-    class="flex justify-between border-b border-slate-300 px-11 py-10"
+    class="flex justify-between border-b border-slate-100 px-11 py-10"
   >
     <div class="flex items-center gap-4">
       <img src="/logo.png" alt="Logo" class="w-10">