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

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

@ -1,15 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { type DirectoryItem } from '@/types/directory' import { type DirectoryItem } from '@/types/directory'
import { import {
MapPinIcon, MapPin,
PhoneIcon, Phone,
ExternalLinkIcon, ExternalLink,
ZapIcon, Zap,
MessageCircleIcon, MessageCircle,
FacebookIcon, Facebook,
InstagramIcon, Instagram,
TwitterIcon, Twitter,
YoutubeIcon, Youtube,
} from 'lucide-vue-next' } from 'lucide-vue-next'
import { import {
Card, Card,
@ -30,11 +30,11 @@ const categoryColors = {
other: 'bg-gray-100 text-gray-800' other: 'bg-gray-100 text-gray-800'
} }
const socialIcons = { const socials = {
facebook: FacebookIcon, facebook: Facebook,
instagram: InstagramIcon, instagram: Instagram,
twitter: TwitterIcon, twitter: Twitter,
youtube: YoutubeIcon, youtube: Youtube,
} }
const socialColors = { const socialColors = {
@ -49,10 +49,7 @@ const socialColors = {
<template> <template>
<Card class="hover:shadow-md transition-shadow relative overflow-hidden"> <Card class="hover:shadow-md transition-shadow relative overflow-hidden">
<!-- Local watermark --> <!-- Local watermark -->
<div <div v-if="item.local" class="absolute right-3 bottom-2 text-2xl tracking-widest font-bold text-primary opacity-30">
v-if="item.local"
class="absolute right-3 bottom-2 text-2xl tracking-widest font-bold text-primary opacity-30"
>
LOCAL LOCAL
</div> </div>
@ -78,47 +75,42 @@ const socialColors = {
<!-- Contact Info --> <!-- Contact Info -->
<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">
<MapPinIcon class="mr-2 h-4 w-4 text-red-400" /> <MapPin class="mr-2 h-4 w-4 text-red-400" />
<a <a v-if="item.mapsUrl" :href="item.mapsUrl" target="_blank" rel="noopener noreferrer"
v-if="item.mapsUrl" class="flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors">
: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> <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> </a>
<span v-else>{{ [item.address, item.town].filter(Boolean).join(', ') }}</span> <span v-else>{{ [item.address, item.town].filter(Boolean).join(', ') }}</span>
</div> </div>
<div v-if="item.contact" class="flex items-center text-sm gap-2"> <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> <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')" :href="`https://wa.me/${item.contact.replace(/\D/g, '')}`" <a v-if="item.contactType.includes('whatsapp')" :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"> 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 WhatsApp
</a> </a>
<a v-if="item.contactType.includes('telegram')" :href="`https://t.me/${item.contact.replace(/\D/g, '')}`" <a v-if="item.contactType.includes('telegram')" :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"> 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 Telegram
</a> </a>
</div> </div>
</div> </div>
<div v-if="item.lightning" class="flex items-center text-sm"> <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> <span>{{ item.lightning }}</span>
</div> </div>
<!-- Website --> <!-- Website -->
<div v-if="item.url" class="flex items-center text-sm"> <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" <a :href="item.url" target="_blank" rel="noopener noreferrer"
class="text-muted-foreground hover:text-foreground transition-colors"> class="text-muted-foreground hover:text-foreground transition-colors">
{{ item.url.replace(/^https?:\/\//, '').split('/')[0] }} {{ item.url.replace(/^https?:\/\//, '').split('/')[0] }}
@ -128,21 +120,11 @@ 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 <a v-if="url" :href="url" target="_blank" rel="noopener noreferrer" :class="[
v-if="url"
:href="url"
target="_blank"
rel="noopener noreferrer"
:class="[
'transition-colors', 'transition-colors',
socialColors[platform as keyof typeof socialColors] socialColors[platform as keyof typeof socialColors]
]" ]" :title="platform.charAt(0).toUpperCase() + platform.slice(1)">
:title="platform.charAt(0).toUpperCase() + platform.slice(1)" <component :is="socials[platform as keyof typeof socials]" class="h-4 w-4" />
>
<component
:is="socialIcons[platform as keyof typeof socialIcons]"
class="h-4 w-4"
/>
</a> </a>
</template> </template>
</div> </div>