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

update Directory Cards with new fiels, add LOCAL watermark for locally ran businesses; improve url link

Browse source
This commit is contained in:
padreug 2025-02-02 23:30:40 +01:00
parent c0ad944d0b
commit df7b0d6c13
3 changed files with 360 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,16 @@
<script setup lang="ts">
import { type DirectoryItem } from '@/types/directory'
import { MapPin, Phone, ExternalLink, Zap, MessageCircle } from 'lucide-vue-next'
import {
MapPinIcon,
PhoneIcon,
ExternalLinkIcon,
ZapIcon,
MessageCircleIcon,
FacebookIcon,
InstagramIcon,
TwitterIcon,
YoutubeIcon,
} from 'lucide-vue-next'
import {
Card,
CardContent,
@ -19,10 +29,33 @@ const categoryColors = {
retail: 'bg-green-100 text-green-800',
other: 'bg-gray-100 text-gray-800'
}
const socialIcons = {
facebook: FacebookIcon,
instagram: InstagramIcon,
twitter: TwitterIcon,
youtube: YoutubeIcon,
}
const socialColors = {
facebook: 'text-blue-600 hover:text-blue-700',
instagram: 'text-pink-600 hover:text-pink-700',
twitter: 'text-blue-400 hover:text-blue-500',
youtube: 'text-red-600 hover:text-red-700',
tiktok: 'text-gray-800 hover:text-gray-900'
}
</script>
<template>
<Card class="hover:shadow-md transition-shadow">
<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">
@ -45,39 +78,74 @@ const categoryColors = {
<!-- 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" />
<div class="flex items-center gap-1">
<MapPinIcon 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>
<a v-if="item.mapsUrl" :href="item.mapsUrl" target="_blank" rel="noopener noreferrer"
class="text-muted-foreground hover:text-foreground ml-1 opacity-0 group-hover:opacity-100 transition-opacity">
<ExternalLink class="h-3 w-3" />
</a>
</div>
<ExternalLinkIcon 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" />
<PhoneIcon 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" />
<MessageCircleIcon 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" />
<MessageCircleIcon 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" />
<ZapIcon class="mr-2 h-4 w-4" />
<span>{{ item.lightning }}</span>
</div>
<!-- Website -->
<div v-if="item.url" class="flex items-center text-sm">
<ExternalLinkIcon 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="socialIcons[platform as keyof typeof socialIcons]"
class="h-4 w-4"
/>
</a>
</template>
</div>
</div>
</div>
</CardContent>