feat: add catalog page

app.config.ts

@@ -2,5 +2,5 @@ export default defineAppConfig({
   ui: {
     primary: 'lime',
     gray: 'neutral',
-  }
+  },
-})
+})

src/entities/product/index.ts

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

src/entities/product/ui/ProductCard.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { InputNumber } from '~/src/shared/ui'
+
+defineProps<{
+  badges?: string[]
+}>()
+
+const amount = ref(0)
+</script>
+
+<template>
+  <div class="w-64 flex flex-col border-1 rounded-[20px]">
+    <div class="p-3 h-64 bg-[#E9E9E9] flex flex-col justify-between rounded-t-[20px]">
+      <div class="flex gap-1">
+        <UBadge v-for="badge in badges" :key="badge" :ui="{ rounded: 'rounded-full' }" size="md">
+          {{ badge }}
+        </UBadge>
+      </div>
+
+      <div class="flex justify-end text-slate-500 text-sm">
+        155 rub
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-3 p-5">
+      <div>Name</div>
+      <div class="text-2xl font-bold">
+        Price
+      </div>
+      <div class="w-full">
+        <UButton v-if="!amount" class="w-full justify-center" size="xl" @click="amount = 1">
+          Buy
+        </UButton>
+        <InputNumber v-else v-model="amount" />
+      </div>
+    </div>
+  </div>
+</template>

src/entities/product/ui/index.ts

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

src/pages/catalog/index.ts

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

src/pages/catalog/ui/CatalogPage.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { ProductCard } from '~/src/entities/product'
+</script>
+
+<template>
+  <div class="flex flex-col gap-8 pt-39 pr-31 pl-12 pb-34">
+    <div class="grid grid-cols-4 gap-4">
+      <ProductCard v-for="i in 10" :key="i" class="basis-1/4" />
+    </div>
+    <UPagination size="xl" :model-value="1" :page-count="10" :total="30" :max="5" />
+  </div>
+</template>

src/pages/catalog/ui/index.ts

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

src/shared/ui/components/InputNumber.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const props = defineProps<{
+  min?: number
+  max?: number
+}>()
+
+const value = defineModel<number>({
+  default: 0,
+})
+
+function increaseValue() {
+  if (props.max && value.value === props.max) {
+    return
+  }
+
+  value.value = value.value + 1
+}
+
+function decreaseValue() {
+  if (props.min && value.value === props.min) {
+    return
+  }
+
+  value.value = value.value - 1
+}
+</script>
+
+<template>
+  <div class="flex justify-between items-center">
+    <UButton size="xl" icon="heroicons-minus" @click="decreaseValue" />
+    <div>{{ value }} шт</div>
+    <UButton size="xl" icon="heroicons-plus" @click="increaseValue" />
+  </div>
+</template>

src/shared/ui/components/index.ts

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

src/shared/ui/index.ts

@@ -0,0 +1 @@
+export { InputNumber } from './components'