use defineProps
This commit is contained in:
parent
ef6a199011
commit
9cde9b5cf7
1 changed files with 21 additions and 54 deletions
|
|
@ -24,13 +24,11 @@ import {
|
||||||
CardTitle,
|
CardTitle,
|
||||||
CardDescription,
|
CardDescription,
|
||||||
} from '@/components/ui/card'
|
} from '@/components/ui/card'
|
||||||
import { useRouter } from 'vue-router'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
defineProps<{
|
||||||
item: DirectoryItem
|
item: DirectoryItem
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
const categoryIcons = {
|
const categoryIcons = {
|
||||||
restaurant: UtensilsCrossed,
|
restaurant: UtensilsCrossed,
|
||||||
|
|
@ -68,10 +66,8 @@ const socialColors = {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Card
|
<Card class="hover:shadow-md transition-shadow relative overflow-hidden group cursor-pointer"
|
||||||
class="hover:shadow-md transition-shadow relative overflow-hidden group cursor-pointer"
|
@click="$router.push(`/directory/${item.id}`)">
|
||||||
@click="$router.push(`/directory/${item.id}`)"
|
|
||||||
>
|
|
||||||
<!-- Local watermark -->
|
<!-- Local watermark -->
|
||||||
<div v-if="item.local" class="absolute right-3 bottom-2 text-2xl tracking-widest font-bold text-primary opacity-30">
|
<div v-if="item.local" class="absolute right-3 bottom-2 text-2xl tracking-widest font-bold text-primary opacity-30">
|
||||||
LOCAL
|
LOCAL
|
||||||
|
|
@ -87,12 +83,8 @@ const socialColors = {
|
||||||
<div class="space-y-3">
|
<div class="space-y-3">
|
||||||
<div class="flex items-start justify-between">
|
<div class="flex items-start justify-between">
|
||||||
<div class="flex items-center gap-3">
|
<div class="flex items-center gap-3">
|
||||||
<component
|
<component :is="categoryIcons[item.category]" class="h-6 w-6" :class="categoryColors[item.category]"
|
||||||
:is="categoryIcons[item.category]"
|
:title="item.category" />
|
||||||
class="h-6 w-6"
|
|
||||||
:class="categoryColors[item.category]"
|
|
||||||
:title="item.category"
|
|
||||||
/>
|
|
||||||
<CardTitle>{{ item.name }}</CardTitle>
|
<CardTitle>{{ item.name }}</CardTitle>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -105,13 +97,9 @@ const socialColors = {
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<div v-if="item.town || item.address" class="flex items-center text-sm group">
|
<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" />
|
<MapPin class="mr-2 h-4 w-4 text-red-400" />
|
||||||
<a v-if="item.mapsUrl"
|
<a v-if="item.mapsUrl" :href="item.mapsUrl" target="_blank" rel="noopener noreferrer"
|
||||||
:href="item.mapsUrl"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
class="flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors relative"
|
class="flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors relative"
|
||||||
@click.stop
|
@click.stop>
|
||||||
>
|
|
||||||
<span>{{ [item.address, item.town].filter(Boolean).join(', ') }}</span>
|
<span>{{ [item.address, item.town].filter(Boolean).join(', ') }}</span>
|
||||||
<ExternalLink class="h-3 w-3 ml-1" />
|
<ExternalLink class="h-3 w-3 ml-1" />
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -122,23 +110,17 @@ const socialColors = {
|
||||||
<Phone class="h-4 w-4" />
|
<Phone class="h-4 w-4" />
|
||||||
<span>{{ item.contact }}</span>
|
<span>{{ item.contact }}</span>
|
||||||
<div v-if="item.contactType" class="flex gap-1">
|
<div v-if="item.contactType" class="flex gap-1">
|
||||||
<a v-if="item.contactType.includes('whatsapp')"
|
<a v-if="item.contactType.includes('whatsapp')" :href="`https://wa.me/${item.contact.replace(/\D/g, '')}`"
|
||||||
:href="`https://wa.me/${item.contact.replace(/\D/g, '')}`"
|
target="_blank" rel="noopener noreferrer"
|
||||||
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="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"
|
||||||
@click.stop
|
@click.stop>
|
||||||
>
|
|
||||||
<MessageCircle class="h-3 w-3" />
|
<MessageCircle class="h-3 w-3" />
|
||||||
WhatsApp
|
WhatsApp
|
||||||
</a>
|
</a>
|
||||||
<a v-if="item.contactType.includes('telegram')"
|
<a v-if="item.contactType.includes('telegram')" :href="`https://t.me/${item.contact.replace(/\D/g, '')}`"
|
||||||
:href="`https://t.me/${item.contact.replace(/\D/g, '')}`"
|
target="_blank" rel="noopener noreferrer"
|
||||||
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 relative"
|
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"
|
||||||
@click.stop
|
@click.stop>
|
||||||
>
|
|
||||||
<MessageCircle class="h-3 w-3" />
|
<MessageCircle class="h-3 w-3" />
|
||||||
Telegram
|
Telegram
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -147,11 +129,8 @@ const socialColors = {
|
||||||
|
|
||||||
<div v-if="item.lightning" class="flex items-center text-sm">
|
<div v-if="item.lightning" class="flex items-center text-sm">
|
||||||
<Zap class="mr-2 h-4 w-4 text-amber-500" />
|
<Zap class="mr-2 h-4 w-4 text-amber-500" />
|
||||||
<a
|
<a :href="`lightning:${item.lightning}`"
|
||||||
:href="`lightning:${item.lightning}`"
|
class="text-muted-foreground hover:text-foreground transition-colors" @click.stop>
|
||||||
class="text-muted-foreground hover:text-foreground transition-colors"
|
|
||||||
@click.stop
|
|
||||||
>
|
|
||||||
{{ item.lightning }}
|
{{ item.lightning }}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -159,13 +138,8 @@ const socialColors = {
|
||||||
<!-- Website -->
|
<!-- Website -->
|
||||||
<div v-if="item.url" class="flex items-center text-sm">
|
<div v-if="item.url" class="flex items-center text-sm">
|
||||||
<ExternalLink class="mr-2 h-4 w-4" />
|
<ExternalLink class="mr-2 h-4 w-4" />
|
||||||
<a
|
<a :href="item.url" target="_blank" rel="noopener noreferrer"
|
||||||
:href="item.url"
|
class="text-muted-foreground hover:text-foreground transition-colors" @click.stop>
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
class="text-muted-foreground hover:text-foreground transition-colors"
|
|
||||||
@click.stop
|
|
||||||
>
|
|
||||||
{{ item.url.replace(/^https?:\/\//, '').split('/')[0] }}
|
{{ item.url.replace(/^https?:\/\//, '').split('/')[0] }}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -173,17 +147,10 @@ const socialColors = {
|
||||||
<!-- Social Media Links -->
|
<!-- Social Media Links -->
|
||||||
<div v-if="item.social" class="flex items-center gap-2 text-sm">
|
<div v-if="item.social" class="flex items-center gap-2 text-sm">
|
||||||
<template v-for="(url, platform) in item.social" :key="platform">
|
<template v-for="(url, platform) in item.social" :key="platform">
|
||||||
<a v-if="url"
|
<a v-if="url" :href="url" target="_blank" rel="noopener noreferrer" :class="[
|
||||||
:href="url"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
:class="[
|
|
||||||
'transition-colors relative',
|
'transition-colors relative',
|
||||||
socialColors[platform as keyof typeof socialColors]
|
socialColors[platform as keyof typeof socialColors]
|
||||||
]"
|
]" :title="platform.charAt(0).toUpperCase() + platform.slice(1)" @click.stop>
|
||||||
:title="platform.charAt(0).toUpperCase() + platform.slice(1)"
|
|
||||||
@click.stop
|
|
||||||
>
|
|
||||||
<component :is="socials[platform as keyof typeof socials]" class="h-4 w-4" />
|
<component :is="socials[platform as keyof typeof socials]" class="h-4 w-4" />
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue