Initial commit from monorepo

app/components/catalog/CatalogOffersSection.vue

@@ -0,0 +1,69 @@
+<template>
+  <Section variant="plain" paddingY="md">
+    <Stack gap="4">
+      <Stack direction="row" align="center" justify="between">
+        <Heading :level="2">{{ t('catalogOffersSection.header.title') }}</Heading>
+        <NuxtLink
+          :to="localePath('/catalog/offers')"
+          class="btn btn-sm btn-ghost"
+        >
+          <span>{{ t('catalogOffersSection.actions.view_all') }}</span>
+          <Icon name="lucide:arrow-right" size="16" />
+        </NuxtLink>
+      </Stack>
+
+      <Grid :cols="1" :md="2" :lg="3" :gap="4">
+        <OfferCard
+          v-for="offer in offers"
+          :key="offer.uuid"
+          :offer="offer"
+        />
+      </Grid>
+
+      <Stack v-if="totalOffers > 0" direction="row" align="center" justify="between">
+        <Text tone="muted">
+          {{ t('common.pagination.showing', { shown: offers.length, total: totalOffers }) }}
+        </Text>
+        <Button v-if="canLoadMore" variant="outline" @click="loadMore">
+          {{ t('common.actions.load_more') }}
+        </Button>
+      </Stack>
+
+      <Stack v-if="offers.length === 0" align="center" gap="2">
+        <Text tone="muted">{{ t('catalogOffersSection.empty.no_offers') }}</Text>
+      </Stack>
+    </Stack>
+  </Section>
+</template>
+
+<script setup lang="ts">
+interface OfferLine {
+  uuid?: string | null
+  productName?: string | null
+}
+
+interface Offer {
+  uuid?: string | null
+  title?: string | null
+  locationName?: string | null
+  status?: string | null
+  validUntil?: string | null
+  lines?: (OfferLine | null)[] | null
+}
+
+const props = defineProps<{
+  offers: Offer[]
+  total?: number
+  canLoadMore?: boolean
+  onLoadMore?: () => void
+}>()
+
+const localePath = useLocalePath()
+const { t } = useI18n()
+
+const totalOffers = computed(() => props.total ?? props.offers.length)
+const canLoadMore = computed(() => props.canLoadMore ?? false)
+const loadMore = () => {
+  props.onLoadMore?.()
+}
+</script>