From d9b694e76a07604d5e339b20c2367c600ca177fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9A=D0=BE=D0=BD=D1=81=D1=82=D0=B0=D0=BD=D1=82=D0=B8?=
 =?UTF-8?q?=D0=BD=20=D0=A3=D0=BA=D0=BE=D0=BB=D0=BE=D0=B2?=
 <“ukolov.konst@gmail.com”>
Date: Mon, 5 Aug 2024 12:30:18 +0300
Subject: [PATCH] feat: add footer and header

---
 app.config.ts                            |  2 +-
 app.vue                                  |  8 +++++++
 src/entities/product/ui/ProductCard.vue  |  2 +-
 src/pages/catalog/ui/CatalogPage.vue     | 23 ++++++++++++++-----
 src/pages/position/ui/PositionPage.vue   | 23 ++++++++++++++-----
 src/pages/product/ui/ProductPage.vue     | 29 ++++++++++++++++--------
 src/shared/ui/index.ts                   |  1 +
 src/shared/ui/layouts/StandardLayout.vue | 17 ++++++++++++++
 src/shared/ui/layouts/index.ts           |  1 +
 src/widgets/footer/index.ts              |  1 +
 src/widgets/footer/ui/Footer.vue         | 29 ++++++++++++++++++++++++
 src/widgets/footer/ui/index.ts           |  1 +
 src/widgets/header/index.ts              |  1 +
 src/widgets/header/ui/Header.vue         | 26 +++++++++++++++++++++
 src/widgets/header/ui/index.ts           |  1 +
 15 files changed, 142 insertions(+), 23 deletions(-)
 create mode 100644 src/shared/ui/layouts/StandardLayout.vue
 create mode 100644 src/shared/ui/layouts/index.ts
 create mode 100644 src/widgets/footer/index.ts
 create mode 100644 src/widgets/footer/ui/Footer.vue
 create mode 100644 src/widgets/footer/ui/index.ts
 create mode 100644 src/widgets/header/index.ts
 create mode 100644 src/widgets/header/ui/Header.vue
 create mode 100644 src/widgets/header/ui/index.ts

diff --git a/app.config.ts b/app.config.ts
index 260e93b..aa0e765 100644
--- a/app.config.ts
+++ b/app.config.ts
@@ -1,6 +1,6 @@
 export default defineAppConfig({
   ui: {
-    primary: 'lime',
+    primary: 'pink',
     gray: 'neutral',
   },
 })
diff --git a/app.vue b/app.vue
index c6e094a..4ceff66 100644
--- a/app.vue
+++ b/app.vue
@@ -4,3 +4,11 @@
 <template>
   <NuxtPage />
 </template>
+
+<style>
+body, #__nuxt {
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+}
+</style>
diff --git a/src/entities/product/ui/ProductCard.vue b/src/entities/product/ui/ProductCard.vue
index 8b2591c..10000f9 100644
--- a/src/entities/product/ui/ProductCard.vue
+++ b/src/entities/product/ui/ProductCard.vue
@@ -56,7 +56,7 @@ updatePrices()
 </script>
 
 <template>
-  <div class="w-64 flex flex-col border-1 rounded-[20px]">
+  <div class="flex flex-col border-1 rounded-[20px]">
     <div class="h-64 relative flex flex-col justify-between rounded-t-[20px]">
       <ProductImage :path="product.images?.[0]" :labels="product.labels" class="rounded-t-[20px] cursor-pointer" @click="onImageClick">
         {{ currentUnitPrice }} ₽ / {{ product.unit }}
diff --git a/src/pages/catalog/ui/CatalogPage.vue b/src/pages/catalog/ui/CatalogPage.vue
index 4f0769c..1545347 100644
--- a/src/pages/catalog/ui/CatalogPage.vue
+++ b/src/pages/catalog/ui/CatalogPage.vue
@@ -2,17 +2,28 @@
 import { ProductCard } from '~/src/entities/product'
 import { useCRMGetPositions } from '~/src/shared/api/crm/crm'
 import { Sidebar } from '~/src/widgets/sidebar'
+import { StandardLayout } from '~/src/shared/ui'
+import { Header } from '~/src/widgets/header'
+import { Footer } from '~/src/widgets/footer'
 
 const { data: positions } = useCRMGetPositions('0')
 </script>
 
 <template>
-  <div class="flex gap-12 pl-31">
-    <Sidebar />
-    <div class="flex flex-col gap-8 pr-31 pb-34">
-      <div class="grid grid-cols-4 gap-4">
-        <ProductCard v-for="product in positions?.data.products" :key="product.id" class="basis-1/4" :product />
+  <StandardLayout>
+    <template #header>
+      <Header />
+    </template>
+    <div class="flex gap-12">
+      <Sidebar />
+      <div class="flex flex-col gap-8 pb-34">
+        <div class="grid grid-cols-4 gap-4">
+          <ProductCard v-for="product in positions?.data.products" :key="product.id" class="basis-1/4" :product />
+        </div>
       </div>
     </div>
-  </div>
+    <template #footer>
+      <Footer />
+    </template>
+  </StandardLayout>
 </template>
diff --git a/src/pages/position/ui/PositionPage.vue b/src/pages/position/ui/PositionPage.vue
index 240d3ff..5473f80 100644
--- a/src/pages/position/ui/PositionPage.vue
+++ b/src/pages/position/ui/PositionPage.vue
@@ -2,6 +2,9 @@
 import { ProductCard } from '~/src/entities/product'
 import { useCRMGetPositions } from '~/src/shared/api/crm/crm'
 import { Sidebar } from '~/src/widgets/sidebar'
+import { StandardLayout } from '~/src/shared/ui'
+import { Header } from '~/src/widgets/header'
+import { Footer } from '~/src/widgets/footer'
 
 const route = useRoute()
 
@@ -9,12 +12,20 @@ const { data: positions } = useCRMGetPositions(route.params.id as string)
 </script>
 
 <template>
-  <div class="flex gap-12 pl-31">
-    <Sidebar />
-    <div class="flex flex-col gap-8 pr-31 pb-34">
-      <div class="grid grid-cols-4 gap-4">
-        <ProductCard v-for="product in positions?.data.products" :key="product.id" class="basis-1/4" :product />
+  <StandardLayout>
+    <template #header>
+      <Header />
+    </template>
+    <div class="flex gap-12">
+      <Sidebar />
+      <div class="flex flex-col gap-8 pb-34">
+        <div class="grid grid-cols-4 gap-4">
+          <ProductCard v-for="product in positions?.data.products" :key="product.id" class="basis-1/4" :product />
+        </div>
       </div>
     </div>
-  </div>
+    <template #footer>
+      <Footer />
+    </template>
+  </StandardLayout>
 </template>
diff --git a/src/pages/product/ui/ProductPage.vue b/src/pages/product/ui/ProductPage.vue
index 71f1ea7..2f34193 100644
--- a/src/pages/product/ui/ProductPage.vue
+++ b/src/pages/product/ui/ProductPage.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { ProductImage } from '~/src/entities/product'
 import { useCRMGetProduct } from '~/src/shared/api/crm/crm'
+import { Header } from '~/src/widgets/header'
+import { StandardLayout } from '~/src/shared/ui'
+import { Footer } from '~/src/widgets/footer'
 
 const route = useRoute()
 
@@ -8,16 +11,24 @@ const { data } = useCRMGetProduct(route.params.id as string)
 </script>
 
 <template>
-  <div class="flex gap-12">
-    <ProductImage :path="data?.data.product?.images?.[0]" class="w-128 h-128 rounded-[20px]" :labels="data?.data.product?.labels" />
-    <div class="flex flex-col gap-6">
-      <div class="font-bold text-4xl">
-        {{ data?.data.product?.name }}
-      </div>
+  <StandardLayout>
+    <template #header>
+      <Header />
+    </template>
+    <div class="flex gap-12">
+      <ProductImage :path="data?.data.product?.images?.[0]" class="w-128 h-128 rounded-[20px]" :labels="data?.data.product?.labels" />
+      <div class="flex flex-col gap-6">
+        <div class="font-bold text-4xl">
+          {{ data?.data.product?.name }}
+        </div>
 
-      <div class="flex flex-col gap-4">
-        <div>Надо заполнить на бэке - тяжело тестить</div>
+        <div class="flex flex-col gap-4">
+          <div>Надо заполнить на бэке - тяжело тестить</div>
+        </div>
       </div>
     </div>
-  </div>
+    <template #footer>
+      <Footer />
+    </template>
+  </StandardLayout>
 </template>
diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts
index 5f2c191..fa60c87 100644
--- a/src/shared/ui/index.ts
+++ b/src/shared/ui/index.ts
@@ -1 +1,2 @@
 export { InputNumber } from './components'
+export { StandardLayout } from './layouts'
diff --git a/src/shared/ui/layouts/StandardLayout.vue b/src/shared/ui/layouts/StandardLayout.vue
new file mode 100644
index 0000000..95b645e
--- /dev/null
+++ b/src/shared/ui/layouts/StandardLayout.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="flex flex-col w-full h-full ma ">
+    <div class="border-b border-gray-200 px-31 sticky top-0 z-50 bg-white flex-shrink-0">
+      <slot name="header" />
+    </div>
+    <div class="px-31 pt-12 flex-1">
+      <slot />
+    </div>
+    <div class="border-t border-gray-200 px-31">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
diff --git a/src/shared/ui/layouts/index.ts b/src/shared/ui/layouts/index.ts
new file mode 100644
index 0000000..92175d1
--- /dev/null
+++ b/src/shared/ui/layouts/index.ts
@@ -0,0 +1 @@
+export { default as StandardLayout } from './StandardLayout.vue'
diff --git a/src/widgets/footer/index.ts b/src/widgets/footer/index.ts
new file mode 100644
index 0000000..f107b73
--- /dev/null
+++ b/src/widgets/footer/index.ts
@@ -0,0 +1 @@
+export { Footer } from './ui'
diff --git a/src/widgets/footer/ui/Footer.vue b/src/widgets/footer/ui/Footer.vue
new file mode 100644
index 0000000..40773ac
--- /dev/null
+++ b/src/widgets/footer/ui/Footer.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="flex py-8 items-center justify-between">
+    <div class="flex gap-29 justify-between">
+      <img
+        src="../../../../public/favicon.ico"
+        alt="svg"
+      >
+      <div class="w-66 flex flex-col gap-4">
+        <div class="flex items-center gap-3">
+          <UIcon name="heroicons-phone" class="w-6 h-6 color-gray-400" />
+          <span class="font-medium">+7 (913) 248-04-50</span>
+        </div>
+        <div class="flex items-center gap-3">
+          <UIcon name="heroicons-envelope" class="w-6 h-6 color-gray-400" />
+          <span class="font-medium">email@mail.ru</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-col text-gray-400">
+      <div>ИП Джалолов Н. А. Алтайский край, р-н Рубцовский, с Веселоярск,</div>
+      <div>ИНН 226911378195, ОГРНИП 321220200263292</div>
+    </div>
+  </div>
+</template>
diff --git a/src/widgets/footer/ui/index.ts b/src/widgets/footer/ui/index.ts
new file mode 100644
index 0000000..d6068fd
--- /dev/null
+++ b/src/widgets/footer/ui/index.ts
@@ -0,0 +1 @@
+export { default as Footer } from './Footer.vue'
diff --git a/src/widgets/header/index.ts b/src/widgets/header/index.ts
new file mode 100644
index 0000000..6a70801
--- /dev/null
+++ b/src/widgets/header/index.ts
@@ -0,0 +1 @@
+export { Header } from './ui'
diff --git a/src/widgets/header/ui/Header.vue b/src/widgets/header/ui/Header.vue
new file mode 100644
index 0000000..10155b5
--- /dev/null
+++ b/src/widgets/header/ui/Header.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="py-8 flex gap-12 items-center w-full">
+    <img
+      src="../../../../public/favicon.ico"
+      alt="svg"
+    >
+    <div class="flex gap-5 w-full">
+      <UButton size="xl" icon="heroicons-bars-3">
+        Каталог
+      </UButton>
+      <UInputMenu placeholder="Поиск по каталогу" size="xl" class="w-full" leading-icon="heroicons-magnifying-glass" />
+      <UButton variant="soft" size="xl" class="border text-black border-pink-500" icon="heroicons-shopping-cart" trailing-icon="badge">
+        Корзина
+        <template #trailing>
+          <UBadge
+            size="xs" label="2"
+          />
+        </template>
+      </UButton>
+    </div>
+  </div>
+</template>
diff --git a/src/widgets/header/ui/index.ts b/src/widgets/header/ui/index.ts
new file mode 100644
index 0000000..9f67dde
--- /dev/null
+++ b/src/widgets/header/ui/index.ts
@@ -0,0 +1 @@
+export { default as Header } from './Header.vue'