padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

use defineProps

Browse source
This commit is contained in:
padreug 2025-02-10 22:05:41 +01:00
parent ef6a199011
commit 9cde9b5cf7
1 changed files with 21 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

71
src/components/directory/DirectoryCard.vue
View file

@ -24,13 +24,11 @@ import {
CardTitle,
CardDescription,
} from '@/components/ui/card'
import { useRouter } from 'vue-router'
const props = defineProps<{
defineProps<{
item: DirectoryItem
}>()
const router = useRouter()
const categoryIcons = {
restaurant: UtensilsCrossed,
@ -68,10 +66,8 @@ const socialColors = {
</script>
<template>
<Card
class="hover:shadow-md transition-shadow relative overflow-hidden group cursor-pointer"
@click="$router.push(`/directory/${item.id}`)"
>
<Card class="hover:shadow-md transition-shadow relative overflow-hidden group cursor-pointer"
@click="$router.push(`/directory/${item.id}`)">
<!-- Local watermark -->
<div v-if="item.local" class="absolute right-3 bottom-2 text-2xl tracking-widest font-bold text-primary opacity-30">
LOCAL
@ -87,12 +83,8 @@ const socialColors = {
<div class="space-y-3">
<div class="flex items-start justify-between">
<div class="flex items-center gap-3">
<component
:is="categoryIcons[item.category]"
class="h-6 w-6"
:class="categoryColors[item.category]"
:title="item.category"
/>
<component :is="categoryIcons[item.category]" class="h-6 w-6" :class="categoryColors[item.category]"
:title="item.category" />
<CardTitle>{{ item.name }}</CardTitle>
</div>
</div>
@ -105,13 +97,9 @@ const socialColors = {
<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"
<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 relative"
@click.stop
>
@click.stop>
<span>{{ [item.address, item.town].filter(Boolean).join(', ') }}</span>
<ExternalLink class="h-3 w-3 ml-1" />
</a>
@ -122,23 +110,17 @@ const socialColors = {
<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"
<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 relative"
@click.stop
>
@click.stop>
<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"
<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 relative"
@click.stop
>
@click.stop>
<MessageCircle class="h-3 w-3" />
Telegram
</a>
@ -147,11 +129,8 @@ const socialColors = {
<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"
@click.stop
>
<a :href="`lightning:${item.lightning}`"
class="text-muted-foreground hover:text-foreground transition-colors" @click.stop>
{{ item.lightning }}
</a>
</div>
@ -159,13 +138,8 @@ const socialColors = {
<!-- 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
>
<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>
@ -173,17 +147,10 @@ const socialColors = {
<!-- 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="[
<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
>
]" :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>