From 748051818d14451e03bbdeabcfd9a08927ee77db Mon Sep 17 00:00:00 2001
From: Sergey Krylov <ksv741@mail.ru>
Date: Wed, 22 Jan 2025 05:26:10 +0300
Subject: [PATCH] add header

---
 eslint.config.js          |  7 +++++++
 src/App.vue               | 11 +++++++----
 src/components/Header.vue | 40 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 54 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Header.vue

diff --git a/eslint.config.js b/eslint.config.js
index d7c0b2f..0f2e8ce 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -14,4 +14,11 @@ export default [
 
   ...pluginVue.configs['flat/essential'],
   skipFormatting,
+  {
+    name: 'app/custom-rules',
+    files: ['**/*.{ts,mts,tsx,vue}'],
+    rules: {
+      'vue/multi-word-component-names':  'off'
+    }
+  }
 ]
diff --git a/src/App.vue b/src/App.vue
index b76629f..ffb9baf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,10 @@
+<script setup>
+  import Header from '@/components/Header.vue'
+</script>
 <template>
-  <div>
-    <h1>
-      Vue
-    </h1>
+  <div
+    class="mt-14 w-4/5 mx-auto bg-white h-screen rounded-xl shadow-xl"
+  >
+  <Header/>
   </div>
 </template>
diff --git a/src/components/Header.vue b/src/components/Header.vue
new file mode 100644
index 0000000..01a20dc
--- /dev/null
+++ b/src/components/Header.vue
@@ -0,0 +1,40 @@
+<template>
+  <header
+    class="flex justify-between border-b border-slate-300 px-11 py-10"
+  >
+    <div class="flex items-center gap-4">
+      <img src="/logo.png" alt="Logo" class="w-10">
+
+      <div>
+        <h2 class="text-xl font-bold uppercase">
+          Vue Sneakers
+        </h2>
+        <p class="text-slate-500">
+          Магазин лучших кроссовок
+        </p>
+      </div>
+    </div>
+
+    <ul class="flex items-center gap-8">
+      <li class="flex items-center gap-2 text-gray-500 hover:text-black cursor-pointer">
+        <img src="/cart.svg" alt="Cart">
+        <b>
+          1 205 руб.
+        </b>
+      </li>
+
+      <li class="flex items-center gap-2 text-gray-500 hover:text-black cursor-pointer">
+        <img src="/heart.svg" alt="Heart">
+
+        <span>Закладки</span>
+      </li>
+
+      <li class="flex items-center gap-2 text-gray-500 hover:text-black cursor-pointer">
+        <img src="/profile.svg" alt="Profile">
+
+        <span>Профиль</span>
+      </li>
+    </ul>
+
+  </header>
+</template>