Initial commit from monorepo

app/pages/catalog/suppliers/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <Stack gap="6">
+    <Section variant="plain" paddingY="md">
+      <PageHeader :title="t('catalogSuppliersSection.header.title')" />
+    </Section>
+
+    <Section v-if="isLoading" variant="plain" paddingY="md">
+      <Card padding="lg">
+        <Stack align="center" justify="center" gap="3">
+          <Spinner />
+          <Text tone="muted">{{ t('catalogLanding.states.loading') }}</Text>
+        </Stack>
+      </Card>
+    </Section>
+
+    <Section v-else variant="plain" paddingY="md">
+      <Stack gap="4">
+        <NuxtLink :to="localePath('/catalog/suppliers/map')" class="block h-48 rounded-lg overflow-hidden cursor-pointer">
+          <ClientOnly>
+            <MapboxGlobe
+              map-id="suppliers-map"
+              :locations="itemsWithCoords"
+              :height="192"
+            />
+          </ClientOnly>
+        </NuxtLink>
+
+        <CatalogFilters :filters="filters" v-model="selectedFilter" />
+
+        <Grid :cols="1" :md="2" :lg="3" :gap="4">
+          <SupplierCard
+            v-for="supplier in items"
+            :key="supplier.uuid || supplier.teamUuid"
+            :supplier="supplier"
+          />
+        </Grid>
+
+        <PaginationLoadMore
+          :shown="items.length"
+          :total="total"
+          :can-load-more="canLoadMore"
+          :loading="isLoadingMore"
+          @load-more="loadMore"
+        />
+
+        <Stack v-if="total === 0" align="center" gap="2">
+          <Text tone="muted">{{ t('catalogSuppliersSection.empty.no_suppliers') }}</Text>
+        </Stack>
+      </Stack>
+    </Section>
+  </Stack>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+const localePath = useLocalePath()
+
+const {
+  items,
+  total,
+  selectedFilter,
+  filters,
+  isLoading,
+  isLoadingMore,
+  itemsWithCoords,
+  canLoadMore,
+  loadMore,
+  init
+} = useCatalogSuppliers()
+
+await init()
+
+useHead(() => ({
+  title: t('catalogSuppliersSection.header.title')
+}))
+</script>