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

remove appended Icon from imports

Browse source
This commit is contained in:
padreug 2025-02-02 23:51:17 +01:00
parent df7b0d6c13
commit ce61630350
1 changed files with 30 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,15 +1,15 @@
<script setup lang="ts">
import { type DirectoryItem } from '@/types/directory'
import {
MapPinIcon,
PhoneIcon,
ExternalLinkIcon,
ZapIcon,
MessageCircleIcon,
FacebookIcon,
InstagramIcon,
TwitterIcon,
YoutubeIcon,
MapPin,
Phone,
ExternalLink,
Zap,
MessageCircle,
Facebook,
Instagram,
Twitter,
Youtube,
} from 'lucide-vue-next'
import {
Card,
@ -30,11 +30,11 @@ const categoryColors = {
other: 'bg-gray-100 text-gray-800'
}
const socialIcons = {
facebook: FacebookIcon,
instagram: InstagramIcon,
twitter: TwitterIcon,
youtube: YoutubeIcon,
const socials = {
facebook: Facebook,
instagram: Instagram,
twitter: Twitter,
youtube: Youtube,
}
const socialColors = {
@ -49,10 +49,7 @@ const socialColors = {
<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"
>
<div v-if="item.local" class="absolute right-3 bottom-2 text-2xl tracking-widest font-bold text-primary opacity-30">
LOCAL
</div>
@ -78,47 +75,42 @@ const socialColors = {
<!-- Contact Info -->
<div class="space-y-2">
<div v-if="item.town || item.address" class="flex items-center text-sm group">
<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"
>
<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>
<ExternalLinkIcon class="h-3 w-3 ml-1" />
<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">
<PhoneIcon class="h-4 w-4" />
<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">
<MessageCircleIcon class="h-3 w-3" />
<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">
<MessageCircleIcon class="h-3 w-3" />
<MessageCircle class="h-3 w-3" />
Telegram
</a>
</div>
</div>
<div v-if="item.lightning" class="flex items-center text-sm">
<ZapIcon class="mr-2 h-4 w-4" />
<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">
<ExternalLinkIcon class="mr-2 h-4 w-4" />
<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] }}
@ -128,21 +120,11 @@ 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="[
'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 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>