preserve link clickability and rest links to DirectoryItem.vue
This commit is contained in:
parent
666729a315
commit
83c6285bce
1 changed files with 116 additions and 86 deletions
|
|
@ -24,11 +24,14 @@ import {
|
||||||
CardTitle,
|
CardTitle,
|
||||||
CardDescription,
|
CardDescription,
|
||||||
} from '@/components/ui/card'
|
} from '@/components/ui/card'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
|
||||||
defineProps<{
|
const props = defineProps<{
|
||||||
item: DirectoryItem
|
item: DirectoryItem
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
const categoryIcons = {
|
const categoryIcons = {
|
||||||
restaurant: UtensilsCrossed,
|
restaurant: UtensilsCrossed,
|
||||||
lodging: Bed,
|
lodging: Bed,
|
||||||
|
|
@ -65,101 +68,128 @@ const socialColors = {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<router-link :to="`/directory/${item.id}`" class="block">
|
<Card
|
||||||
<Card class="hover:shadow-md transition-shadow relative overflow-hidden">
|
class="hover:shadow-md transition-shadow relative overflow-hidden group cursor-pointer"
|
||||||
<!-- Local watermark -->
|
@click="$router.push(`/directory/${item.id}`)"
|
||||||
<div v-if="item.local" class="absolute right-3 bottom-2 text-2xl tracking-widest font-bold text-primary opacity-30">
|
>
|
||||||
LOCAL
|
<!-- 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 relative z-20">
|
||||||
|
<!-- 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>
|
</div>
|
||||||
|
|
||||||
<CardContent class="p-6 space-y-4">
|
<!-- Content -->
|
||||||
<!-- Image -->
|
<div class="space-y-3">
|
||||||
<div v-if="item.imageUrl" class="aspect-video w-full overflow-hidden rounded-md">
|
<div class="flex items-start justify-between">
|
||||||
<img :src="item.imageUrl" :alt="item.name" class="h-full w-full object-cover" />
|
<div class="flex items-center gap-3">
|
||||||
|
<component
|
||||||
|
:is="categoryIcons[item.category]"
|
||||||
|
class="h-6 w-6"
|
||||||
|
:class="categoryColors[item.category]"
|
||||||
|
:title="item.category"
|
||||||
|
/>
|
||||||
|
<CardTitle>{{ item.name }}</CardTitle>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Content -->
|
<CardDescription>
|
||||||
<div class="space-y-3">
|
{{ item.description }}
|
||||||
<div class="flex items-start justify-between">
|
</CardDescription>
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<component
|
<!-- Contact Info -->
|
||||||
:is="categoryIcons[item.category]"
|
<div class="space-y-2">
|
||||||
class="h-6 w-6"
|
<div v-if="item.town || item.address" class="flex items-center text-sm group">
|
||||||
:class="categoryColors[item.category]"
|
<MapPin class="mr-2 h-4 w-4 text-red-400" />
|
||||||
:title="item.category"
|
<a v-if="item.mapsUrl"
|
||||||
/>
|
:href="item.mapsUrl"
|
||||||
<CardTitle>{{ item.name }}</CardTitle>
|
target="_blank"
|
||||||
</div>
|
rel="noopener noreferrer"
|
||||||
|
class="flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors relative"
|
||||||
|
@click.stop
|
||||||
|
>
|
||||||
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<CardDescription>
|
<div v-if="item.contact" class="flex items-center text-sm gap-2">
|
||||||
{{ item.description }}
|
<Phone class="h-4 w-4" />
|
||||||
</CardDescription>
|
<span>{{ item.contact }}</span>
|
||||||
|
<div v-if="item.contactType" class="flex gap-1">
|
||||||
<!-- Contact Info -->
|
<a v-if="item.contactType.includes('whatsapp')"
|
||||||
<div class="space-y-2">
|
:href="`https://wa.me/${item.contact.replace(/\D/g, '')}`"
|
||||||
<div v-if="item.town || item.address" class="flex items-center text-sm group">
|
target="_blank"
|
||||||
<MapPin class="mr-2 h-4 w-4 text-red-400" />
|
rel="noopener noreferrer"
|
||||||
<a v-if="item.mapsUrl" :href="item.mapsUrl" 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 relative"
|
||||||
class="flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors">
|
@click.stop
|
||||||
<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>
|
|
||||||
</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 text-amber-500" />
|
|
||||||
<a
|
|
||||||
:href="`lightning:${item.lightning}`"
|
|
||||||
class="text-muted-foreground hover:text-foreground transition-colors"
|
|
||||||
>
|
>
|
||||||
{{ item.lightning }}
|
<MessageCircle class="h-3 w-3" />
|
||||||
|
WhatsApp
|
||||||
</a>
|
</a>
|
||||||
</div>
|
<a v-if="item.contactType.includes('telegram')"
|
||||||
|
:href="`https://t.me/${item.contact.replace(/\D/g, '')}`"
|
||||||
<!-- Website -->
|
target="_blank"
|
||||||
<div v-if="item.url" class="flex items-center text-sm">
|
rel="noopener noreferrer"
|
||||||
<ExternalLink class="mr-2 h-4 w-4" />
|
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 relative"
|
||||||
<a :href="item.url" target="_blank" rel="noopener noreferrer"
|
@click.stop
|
||||||
class="text-muted-foreground hover:text-foreground transition-colors">
|
>
|
||||||
{{ item.url.replace(/^https?:\/\//, '').split('/')[0] }}
|
<MessageCircle class="h-3 w-3" />
|
||||||
|
Telegram
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<!-- Social Media Links -->
|
|
||||||
<div v-if="item.social" class="flex items-center gap-2 text-sm">
|
<div v-if="item.lightning" class="flex items-center text-sm">
|
||||||
<template v-for="(url, platform) in item.social" :key="platform">
|
<Zap class="mr-2 h-4 w-4 text-amber-500" />
|
||||||
<a v-if="url" :href="url" target="_blank" rel="noopener noreferrer" :class="[
|
<a
|
||||||
'transition-colors',
|
:href="`lightning:${item.lightning}`"
|
||||||
socialColors[platform as keyof typeof socialColors]
|
class="text-muted-foreground hover:text-foreground transition-colors"
|
||||||
]" :title="platform.charAt(0).toUpperCase() + platform.slice(1)">
|
@click.stop
|
||||||
<component :is="socials[platform as keyof typeof socials]" class="h-4 w-4" />
|
>
|
||||||
</a>
|
{{ item.lightning }}
|
||||||
</template>
|
</a>
|
||||||
</div>
|
</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"
|
||||||
|
@click.stop
|
||||||
|
>
|
||||||
|
{{ 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 relative',
|
||||||
|
socialColors[platform as keyof typeof socialColors]
|
||||||
|
]"
|
||||||
|
:title="platform.charAt(0).toUpperCase() + platform.slice(1)"
|
||||||
|
@click.stop
|
||||||
|
>
|
||||||
|
<component :is="socials[platform as keyof typeof socials]" class="h-4 w-4" />
|
||||||
|
</a>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</div>
|
||||||
</Card>
|
</CardContent>
|
||||||
</router-link>
|
</Card>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue