optovia/webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add verified badge top-right on SupplierCard, transport icons on HubCard
Some checks failed
Build Docker Image / build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-01-22 10:05:59 +07:00
parent 09e5889feb
commit bd176973a8
2 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/components/catalog/HubCard.vue
View File

@@ -16,8 +16,16 @@
]"
>
<div class="flex flex-col gap-1">
<!-- Title -->
<!-- Title + Transport icons -->
<div class="flex items-center justify-between gap-2">
<Text size="base" weight="semibold" class="truncate">{{ hub.name }}</Text>
<div v-if="hub.transportTypes?.length" class="flex items-center gap-1 shrink-0">
<Icon v-if="hasTransport('auto')" name="lucide:truck" size="14" class="text-base-content/50" />
<Icon v-if="hasTransport('rail')" name="lucide:train-front" size="14" class="text-base-content/50" />
<Icon v-if="hasTransport('sea')" name="lucide:ship" size="14" class="text-base-content/50" />
<Icon v-if="hasTransport('air')" name="lucide:plane" size="14" class="text-base-content/50" />
</div>
</div>
<!-- Country left, distance right -->
<div class="flex items-center justify-between">
<Text tone="muted" size="sm">
@@ -41,6 +49,7 @@ interface Hub {
country?: string | null
countryCode?: string | null
distance?: string
transportTypes?: string[] | null
}
const props = defineProps<{
@@ -72,4 +81,6 @@ const countryFlag = computed(() => {
}
return '🌍'
})
const hasTransport = (type: string) => props.hub.transportTypes?.includes(type)
</script>

8
app/components/catalog/SupplierCard.vue
View File

@@ -9,10 +9,15 @@
<Card
padding="small"
:interactive="linkable || selectable"
class="relative"
:class="[
isSelected && 'ring-2 ring-primary ring-offset-2'
]"
>
<!-- Verified badge top-right -->
<span v-if="supplier.isVerified" class="absolute -top-2 -right-2 badge badge-neutral badge-sm">
{{ t('catalogSupplier.badges.verified') }}
</span>
<div class="flex flex-col gap-1">
<!-- Logo -->
<div v-if="supplier.logo" class="w-12 h-12 mb-1">
@@ -25,9 +30,6 @@
<Text size="base" weight="semibold" class="truncate">{{ supplier.name }}</Text>
<!-- Badges -->
<div class="flex flex-wrap gap-1">
<span v-if="supplier.isVerified" class="badge badge-neutral badge-dash text-xs">
{{ t('catalogSupplier.badges.verified') }}
</span>
<span class="badge badge-neutral badge-dash text-xs">
{{ reliabilityLabel }}
</span>