add header

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'
+    }
+  }
 ]

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>

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>