feat: add catalog page

2024-07-31 10:12:27 +03:00
parent eea0f12431
commit 33336ef3b3
10 changed files with 92 additions and 2 deletions
@@ -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>