URL Parameter fct to a specific Directory Card entry
This commit is contained in:
parent
8dbfd3af2c
commit
e6bc387ebb
7 changed files with 461 additions and 372 deletions
|
|
@ -48,89 +48,91 @@ const socialColors = {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<Card class="hover:shadow-md transition-shadow relative overflow-hidden">
|
||||
<!-- Local watermark -->
|
||||
<div v-if="item.local" class="absolute right-3 bottom-2 text-2xl tracking-widest font-bold text-primary opacity-30">
|
||||
LOCAL
|
||||
</div>
|
||||
|
||||
<CardContent class="p-6 space-y-4">
|
||||
<!-- Image -->
|
||||
<div v-if="item.imageUrl" class="aspect-video w-full overflow-hidden rounded-md">
|
||||
<img :src="item.imageUrl" :alt="item.name" class="h-full w-full object-cover" />
|
||||
<router-link :to="`/directory/${item.id}`" class="block">
|
||||
<Card class="hover:shadow-md transition-shadow relative overflow-hidden">
|
||||
<!-- Local watermark -->
|
||||
<div v-if="item.local" class="absolute right-3 bottom-2 text-2xl tracking-widest font-bold text-primary opacity-30">
|
||||
LOCAL
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start justify-between">
|
||||
<CardTitle>{{ item.name }}</CardTitle>
|
||||
<span class="rounded-full px-2.5 py-0.5 text-xs font-semibold" :class="categoryColors[item.category]">
|
||||
{{ item.category }}
|
||||
</span>
|
||||
<CardContent class="p-6 space-y-4">
|
||||
<!-- Image -->
|
||||
<div v-if="item.imageUrl" class="aspect-video w-full overflow-hidden rounded-md">
|
||||
<img :src="item.imageUrl" :alt="item.name" class="h-full w-full object-cover" />
|
||||
</div>
|
||||
|
||||
<CardDescription>
|
||||
{{ item.description }}
|
||||
</CardDescription>
|
||||
|
||||
<!-- Contact Info -->
|
||||
<div class="space-y-2">
|
||||
<div v-if="item.town || item.address" class="flex items-center text-sm group">
|
||||
<MapPin class="mr-2 h-4 w-4 text-red-400" />
|
||||
<a v-if="item.mapsUrl" :href="item.mapsUrl" target="_blank" rel="noopener noreferrer"
|
||||
class="flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors">
|
||||
<span>{{ [item.address, item.town].filter(Boolean).join(', ') }}</span>
|
||||
<ExternalLink class="h-3 w-3 ml-1" />
|
||||
</a>
|
||||
<span v-else>{{ [item.address, item.town].filter(Boolean).join(', ') }}</span>
|
||||
<!-- Content -->
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start justify-between">
|
||||
<CardTitle>{{ item.name }}</CardTitle>
|
||||
<span class="rounded-full px-2.5 py-0.5 text-xs font-semibold" :class="categoryColors[item.category]">
|
||||
{{ item.category }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="item.contact" class="flex items-center text-sm gap-2">
|
||||
<Phone class="h-4 w-4" />
|
||||
<span>{{ item.contact }}</span>
|
||||
<div v-if="item.contactType" class="flex gap-1">
|
||||
<a v-if="item.contactType.includes('whatsapp')" :href="`https://wa.me/${item.contact.replace(/\D/g, '')}`"
|
||||
target="_blank" rel="noopener noreferrer"
|
||||
class="bg-green-100 text-green-800 px-2 py-0.5 rounded-full text-xs font-medium flex items-center gap-1 hover:bg-green-200 transition-colors">
|
||||
<MessageCircle class="h-3 w-3" />
|
||||
WhatsApp
|
||||
<CardDescription>
|
||||
{{ item.description }}
|
||||
</CardDescription>
|
||||
|
||||
<!-- Contact Info -->
|
||||
<div class="space-y-2">
|
||||
<div v-if="item.town || item.address" class="flex items-center text-sm group">
|
||||
<MapPin class="mr-2 h-4 w-4 text-red-400" />
|
||||
<a v-if="item.mapsUrl" :href="item.mapsUrl" target="_blank" rel="noopener noreferrer"
|
||||
class="flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors">
|
||||
<span>{{ [item.address, item.town].filter(Boolean).join(', ') }}</span>
|
||||
<ExternalLink class="h-3 w-3 ml-1" />
|
||||
</a>
|
||||
<a v-if="item.contactType.includes('telegram')" :href="`https://t.me/${item.contact.replace(/\D/g, '')}`"
|
||||
target="_blank" rel="noopener noreferrer"
|
||||
class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full text-xs font-medium flex items-center gap-1 hover:bg-blue-200 transition-colors">
|
||||
<MessageCircle class="h-3 w-3" />
|
||||
Telegram
|
||||
<span v-else>{{ [item.address, item.town].filter(Boolean).join(', ') }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="item.contact" class="flex items-center text-sm gap-2">
|
||||
<Phone class="h-4 w-4" />
|
||||
<span>{{ item.contact }}</span>
|
||||
<div v-if="item.contactType" class="flex gap-1">
|
||||
<a v-if="item.contactType.includes('whatsapp')" :href="`https://wa.me/${item.contact.replace(/\D/g, '')}`"
|
||||
target="_blank" rel="noopener noreferrer"
|
||||
class="bg-green-100 text-green-800 px-2 py-0.5 rounded-full text-xs font-medium flex items-center gap-1 hover:bg-green-200 transition-colors">
|
||||
<MessageCircle class="h-3 w-3" />
|
||||
WhatsApp
|
||||
</a>
|
||||
<a v-if="item.contactType.includes('telegram')" :href="`https://t.me/${item.contact.replace(/\D/g, '')}`"
|
||||
target="_blank" rel="noopener noreferrer"
|
||||
class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full text-xs font-medium flex items-center gap-1 hover:bg-blue-200 transition-colors">
|
||||
<MessageCircle class="h-3 w-3" />
|
||||
Telegram
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="item.lightning" class="flex items-center text-sm">
|
||||
<Zap class="mr-2 h-4 w-4" />
|
||||
<span>{{ item.lightning }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Website -->
|
||||
<div v-if="item.url" class="flex items-center text-sm">
|
||||
<ExternalLink class="mr-2 h-4 w-4" />
|
||||
<a :href="item.url" target="_blank" rel="noopener noreferrer"
|
||||
class="text-muted-foreground hover:text-foreground transition-colors">
|
||||
{{ item.url.replace(/^https?:\/\//, '').split('/')[0] }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="item.lightning" class="flex items-center text-sm">
|
||||
<Zap class="mr-2 h-4 w-4" />
|
||||
<span>{{ item.lightning }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Website -->
|
||||
<div v-if="item.url" class="flex items-center text-sm">
|
||||
<ExternalLink class="mr-2 h-4 w-4" />
|
||||
<a :href="item.url" target="_blank" rel="noopener noreferrer"
|
||||
class="text-muted-foreground hover:text-foreground transition-colors">
|
||||
{{ item.url.replace(/^https?:\/\//, '').split('/')[0] }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Social Media Links -->
|
||||
<div v-if="item.social" class="flex items-center gap-2 text-sm">
|
||||
<template v-for="(url, platform) in item.social" :key="platform">
|
||||
<a v-if="url" :href="url" target="_blank" rel="noopener noreferrer" :class="[
|
||||
'transition-colors',
|
||||
socialColors[platform as keyof typeof socialColors]
|
||||
]" :title="platform.charAt(0).toUpperCase() + platform.slice(1)">
|
||||
<component :is="socials[platform as keyof typeof socials]" class="h-4 w-4" />
|
||||
</a>
|
||||
</template>
|
||||
<!-- Social Media Links -->
|
||||
<div v-if="item.social" class="flex items-center gap-2 text-sm">
|
||||
<template v-for="(url, platform) in item.social" :key="platform">
|
||||
<a v-if="url" :href="url" target="_blank" rel="noopener noreferrer" :class="[
|
||||
'transition-colors',
|
||||
socialColors[platform as keyof typeof socialColors]
|
||||
]" :title="platform.charAt(0).toUpperCase() + platform.slice(1)">
|
||||
<component :is="socials[platform as keyof typeof socials]" class="h-4 w-4" />
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</router-link>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue