Initial commit from monorepo

app/components/catalog/ProductCard.vue

@@ -0,0 +1,52 @@
+<template>
+  <component
+    :is="linkable ? NuxtLink : 'div'"
+    :to="linkable ? localePath(`/catalog/products/${product.uuid}`) : undefined"
+    class="block"
+    :class="{ 'cursor-pointer': selectable }"
+    @click="selectable && $emit('select')"
+  >
+    <Card
+      padding="sm"
+      :interactive="linkable || selectable"
+      :class="[
+        isSelected && 'ring-2 ring-primary ring-offset-2'
+      ]"
+    >
+      <Stack gap="2">
+        <Stack gap="1">
+          <Text size="base" weight="semibold">{{ product.name }}</Text>
+          <Text tone="muted">{{ product.categoryName || t('catalogProduct.labels.category_unknown') }}</Text>
+        </Stack>
+        <Text v-if="product.description && !compact" tone="muted" size="sm">{{ product.description }}</Text>
+      </Stack>
+    </Card>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { NuxtLink } from '#components'
+
+interface Product {
+  uuid?: string | null
+  name?: string | null
+  categoryName?: string | null
+  description?: string | null
+}
+
+const props = defineProps<{
+  product: Product
+  selectable?: boolean
+  isSelected?: boolean
+  compact?: boolean
+}>()
+
+defineEmits<{
+  (e: 'select'): void
+}>()
+
+const localePath = useLocalePath()
+const { t } = useI18n()
+
+const linkable = computed(() => !props.selectable && props.product.uuid)
+</script>