Initialize the user app and load home banners from the API.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-09 17:08:45 +03:30
commit a7f9c66514
190 changed files with 36160 additions and 0 deletions
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+
+const props = withDefaults(
+  defineProps<{
+    message?: string
+    title?: string
+    /** Context for default icon + copy */
+    variant?: 'default' | 'products' | 'catalogs' | 'orders' | 'cart' | 'checks' | 'search'
+    icon?: string
+    iconSize?: number
+  }>(),
+  {
+    message: undefined,
+    title: undefined,
+    variant: 'default',
+    icon: undefined,
+    iconSize: 72,
+  },
+)
+
+const variantIcons: Record<string, string> = {
+  default: 'vuesax-linear:clipboard-close',
+  products: 'vuesax-linear:box-remove',
+  catalogs: 'vuesax-linear:category',
+  orders: 'vuesax-linear:document-text',
+  cart: 'vuesax-linear:bag-cross',
+  checks: 'vuesax-linear:card-receive',
+  search: 'vuesax-linear:search-status',
+}
+
+const variantTitles: Record<string, string> = {
+  default: '',
+  products: 'محصولی یافت نشد',
+  catalogs: 'کالیته‌ای یافت نشد',
+  orders: 'سفارشی یافت نشد',
+  cart: 'سبد خرید خالی است',
+  checks: 'چکی ثبت نشده است',
+  search: 'نتیجه‌ای یافت نشد',
+}
+
+const resolvedIcon = computed(
+  () => props.icon ?? variantIcons[props.variant] ?? 'vuesax-linear:clipboard-close',
+)
+const resolvedTitle = computed(() => props.title ?? variantTitles[props.variant] ?? '')
+const resolvedMessage = computed(() => props.message ?? '')
+</script>
+
+<template>
+  <div class="empty-state">
+    <div class="empty-state__icon" aria-hidden="true">
+      <slot name="icon">
+        <BasicIcon :icon="resolvedIcon" :size="iconSize" :stroke-width="1.25" />
+      </slot>
+    </div>
+    <h2 v-if="resolvedTitle || $slots.title" class="empty-state__title">
+      <slot name="title">{{ resolvedTitle }}</slot>
+    </h2>
+    <p v-if="resolvedMessage || $slots.message" class="empty-state__message">
+      <slot name="message">{{ resolvedMessage }}</slot>
+    </p>
+    <div v-if="$slots.default" class="empty-state__action">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  width: 100%;
+  padding: 48px 24px;
+  min-height: 280px;
+  text-align: center;
+}
+
+.empty-state__icon {
+  margin-bottom: 16px;
+  color: var(--color-text-muted);
+  opacity: 0.75;
+}
+
+.empty-state__title {
+  margin: 0 0 8px;
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--color-text);
+  line-height: 1.4;
+}
+
+.empty-state__message {
+  margin: 0 0 24px;
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+  line-height: 1.5;
+  max-width: 280px;
+}
+
+.empty-state__message:last-child {
+  margin-bottom: 0;
+}
+
+.empty-state__action {
+  display: flex;
+  justify-content: center;
+}
+</style>