Initial commit from monorepo

app/pages/catalog/hubs/index.vue

@@ -0,0 +1,80 @@
+<template>
+  <Stack gap="6">
+    <Section variant="plain" paddingY="md">
+      <PageHeader :title="t('catalogHubsSection.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="6">
+        <NuxtLink :to="localePath('/catalog/hubs/map')" class="block h-48 rounded-lg overflow-hidden cursor-pointer">
+          <ClientOnly>
+            <MapboxGlobe
+              map-id="hubs-map"
+              :locations="itemsWithCoords"
+              :height="192"
+            />
+          </ClientOnly>
+        </NuxtLink>
+
+        <CatalogFilters :filters="filters" v-model="selectedFilter" />
+
+        <div v-for="country in itemsByCountry" :key="country.name" class="space-y-3">
+          <Text weight="semibold">{{ country.name }}</Text>
+          <Grid :cols="1" :md="2" :lg="3" :gap="4">
+            <HubCard
+              v-for="hub in country.hubs"
+              :key="hub.uuid"
+              :hub="hub"
+            />
+          </Grid>
+        </div>
+
+        <PaginationLoadMore
+          :shown="items.length"
+          :total="total"
+          :can-load-more="canLoadMore"
+          :loading="isLoadingMore"
+          @load-more="loadMore"
+        />
+
+        <Stack v-if="items.length === 0" align="center" gap="2">
+          <Text tone="muted">{{ t('catalogHubsSection.empty.no_hubs') }}</Text>
+        </Stack>
+      </Stack>
+    </Section>
+  </Stack>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+const localePath = useLocalePath()
+
+const {
+  items,
+  total,
+  selectedFilter,
+  filters,
+  isLoading,
+  isLoadingMore,
+  itemsWithCoords,
+  itemsByCountry,
+  canLoadMore,
+  loadMore,
+  init
+} = useCatalogHubs()
+
+await init()
+
+useHead(() => ({
+  title: t('catalogHubsSection.header.title')
+}))
+</script>