feat: add footer and header

app.config.ts

@@ -1,6 +1,6 @@
 export default defineAppConfig({
   ui: {
-    primary: 'lime',
+    primary: 'pink',
     gray: 'neutral',
   },
 })

app.vue

@@ -4,3 +4,11 @@
 <template>
   <NuxtPage />
 </template>
+
+<style>
+body, #__nuxt {
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+}
+</style>

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 }}

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">
+  <StandardLayout>
-    <Sidebar />
+    <template #header>
-    <div class="flex flex-col gap-8 pr-31 pb-34">
+      <Header />
-      <div class="grid grid-cols-4 gap-4">
+    </template>
-        <ProductCard v-for="product in positions?.data.products" :key="product.id" class="basis-1/4" :product />
+    <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>

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">
+  <StandardLayout>
-    <Sidebar />
+    <template #header>
-    <div class="flex flex-col gap-8 pr-31 pb-34">
+      <Header />
-      <div class="grid grid-cols-4 gap-4">
+    </template>
-        <ProductCard v-for="product in positions?.data.products" :key="product.id" class="basis-1/4" :product />
+    <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>

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">
+  <StandardLayout>
-    <ProductImage :path="data?.data.product?.images?.[0]" class="w-128 h-128 rounded-[20px]" :labels="data?.data.product?.labels" />
+    <template #header>
-    <div class="flex flex-col gap-6">
+      <Header />
-      <div class="font-bold text-4xl">
+    </template>
-        {{ data?.data.product?.name }}
+    <div class="flex gap-12">
-      </div>
+      <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 class="flex flex-col gap-4">
-        <div>Надо заполнить на бэке - тяжело тестить</div>
+          <div>Надо заполнить на бэке - тяжело тестить</div>
+        </div>
       </div>
     </div>
-  </div>
+    <template #footer>
+      <Footer />
+    </template>
+  </StandardLayout>
 </template>

src/shared/ui/index.ts

@@ -1 +1,2 @@
 export { InputNumber } from './components'
+export { StandardLayout } from './layouts'

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>

src/shared/ui/layouts/index.ts

@@ -0,0 +1 @@
+export { default as StandardLayout } from './StandardLayout.vue'

src/widgets/footer/index.ts

@@ -0,0 +1 @@
+export { Footer } from './ui'

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>

src/widgets/footer/ui/index.ts

@@ -0,0 +1 @@
+export { default as Footer } from './Footer.vue'

src/widgets/header/index.ts

@@ -0,0 +1 @@
+export { Header } from './ui'

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>

src/widgets/header/ui/index.ts

@@ -0,0 +1 @@
+export { default as Header } from './Header.vue'