update Directory Cards with new fiels, add LOCAL watermark for locally ran businesses; improve url link
This commit is contained in:
parent
c0ad944d0b
commit
df7b0d6c13
3 changed files with 360 additions and 15 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -16,9 +16,11 @@ const emit = defineEmits<{
|
|||
const categories = [
|
||||
{ id: 'all', label: 'All' },
|
||||
{ id: 'restaurant', label: 'Restaurants' },
|
||||
{ id: 'lodging', label: 'Lodging' },
|
||||
{ id: 'goods', label: 'Goods' },
|
||||
{ id: 'services', label: 'Services' },
|
||||
{ id: 'taxi', label: 'Taxis' },
|
||||
{ id: 'lancha', label: 'Lanchas' },
|
||||
{ id: 'retail', label: 'Retail' },
|
||||
{ id: 'other', label: 'Other' }
|
||||
]
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -9,8 +9,12 @@ const mockItems: DirectoryItem[] = [
|
|||
name: 'Ixchel Cafe & Bakery',
|
||||
category: 'restaurant',
|
||||
description: 'A cozy cafe serving great coffee and accepting Bitcoin Lightning payments.',
|
||||
url: 'https://ixchel.atitlan.io',
|
||||
town: 'San Marcos',
|
||||
mapsUrl: 'https://maps.app.goo.gl/sbjmvqP8U4SB4FS29',
|
||||
social: {
|
||||
facebook: 'https://www.facebook.com/emporium.atitlan'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
|
|
@ -25,9 +29,280 @@ const mockItems: DirectoryItem[] = [
|
|||
id: '3',
|
||||
name: 'Bitcoin Lake Lancha',
|
||||
category: 'lancha',
|
||||
description: 'Cross-harbor lancha service accepting Lightning payments.',
|
||||
address: 'Pier 21, Harbor Front',
|
||||
contact: '+1 234-567-8902'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'Eagle\'s Nest',
|
||||
category: 'restaurant',
|
||||
town: 'San Marcos',
|
||||
social: {
|
||||
facebook: 'https://www.facebook.com/eaglesnestatitlan'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'La Sala del Lago',
|
||||
category: 'restaurant',
|
||||
town: 'San Marcos',
|
||||
social: {
|
||||
facebook: 'https://www.facebook.com/La-Sala-Del-Lago-100220539146301'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
name: 'Nectar',
|
||||
category: 'restaurant',
|
||||
town: 'San Marcos',
|
||||
social: {
|
||||
facebook: 'https://www.facebook.com/lovenectar'
|
||||
},
|
||||
local: true
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
name: 'Arati Cafe',
|
||||
category: 'restaurant',
|
||||
town: 'San Marcos',
|
||||
social: {
|
||||
facebook: 'https://www.facebook.com/Arati-Cafe-105767784719695'
|
||||
},
|
||||
local: true
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
name: 'Fe Restaurant',
|
||||
category: 'restaurant',
|
||||
town: 'San Marcos',
|
||||
social: {
|
||||
facebook: 'https://www.facebook.com/fesanmarcos'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
name: 'Hostal del Lago',
|
||||
category: 'lodging',
|
||||
town: 'San Marcos',
|
||||
social: {
|
||||
facebook: 'https://www.facebook.com/Hostel-Del-Lago-605530306467708'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '11',
|
||||
name: 'Lush Atitlan',
|
||||
category: 'lodging',
|
||||
town: 'San Marcos',
|
||||
social: {
|
||||
facebook: 'https://www.facebook.com/lushatitlan/'
|
||||
},
|
||||
local: true
|
||||
},
|
||||
{
|
||||
id: '12',
|
||||
name: 'Hostel Fe San Marcos',
|
||||
category: 'lodging',
|
||||
town: 'San Marcos',
|
||||
social: {
|
||||
facebook: 'https://www.facebook.com/HostelFeSanMarcos'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '13',
|
||||
name: 'Hotel Casa Maya',
|
||||
category: 'lodging',
|
||||
town: 'San Marcos',
|
||||
mapsUrl: 'https://www.google.com/maps/place/Hotel+Casa+Maya'
|
||||
},
|
||||
{
|
||||
id: '14',
|
||||
name: 'Floresta Atitlan',
|
||||
category: 'goods',
|
||||
town: 'San Marcos',
|
||||
social: {
|
||||
facebook: 'https://www.facebook.com/florestatitlan'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '15',
|
||||
name: 'Artesanias San Marcos La Laguna',
|
||||
category: 'goods',
|
||||
town: 'San Marcos',
|
||||
social: {
|
||||
facebook: 'https://www.facebook.com/Artesanias-San-Marcos-La-Laguna-102826589071628/'
|
||||
},
|
||||
local: true
|
||||
},
|
||||
{
|
||||
id: '16',
|
||||
name: 'Textiles Felix San Marcos La Laguna',
|
||||
category: 'goods',
|
||||
town: 'San Marcos',
|
||||
social: {
|
||||
facebook: 'https://www.facebook.com/Textiles-Felix-San-Marcos-La-Laguna-102732085750559'
|
||||
},
|
||||
local: true
|
||||
},
|
||||
{
|
||||
id: '17',
|
||||
name: 'Health Food Store San Jose',
|
||||
category: 'goods',
|
||||
town: 'San Marcos',
|
||||
social: {
|
||||
facebook: 'https://www.facebook.com/Health-Food-Store-San-Jose-719299235179691'
|
||||
},
|
||||
local: true
|
||||
},
|
||||
{
|
||||
id: '18',
|
||||
name: 'Tienda San Jose 2',
|
||||
category: 'goods',
|
||||
town: 'San Marcos',
|
||||
mapsUrl: 'https://www.google.com/maps/place/Tienda+San+José+%232',
|
||||
local: true
|
||||
},
|
||||
{
|
||||
id: '19',
|
||||
name: 'Sound Temple San Marcos',
|
||||
category: 'services',
|
||||
town: 'San Marcos',
|
||||
social: {
|
||||
facebook: 'https://www.facebook.com/SoundTempleSanMarcos'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '20',
|
||||
name: 'Granja Tz\'ikin',
|
||||
category: 'restaurant',
|
||||
town: 'Tzununa',
|
||||
social: {
|
||||
facebook: 'https://www.facebook.com/granjatzikin'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '21',
|
||||
name: 'Veda',
|
||||
category: 'restaurant',
|
||||
town: 'Tzununa',
|
||||
social: {
|
||||
facebook: 'https://www.facebook.com/vedafoodismedicine'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '22',
|
||||
name: 'Bambu Guest House',
|
||||
category: 'lodging',
|
||||
town: 'Tzununa',
|
||||
social: {
|
||||
facebook: 'https://www.facebook.com/bambuguesthousegt'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '23',
|
||||
name: 'Atitlan Organics',
|
||||
category: 'goods',
|
||||
town: 'Tzununa',
|
||||
social: {
|
||||
facebook: 'https://www.facebook.com/atitlanorganics'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '24',
|
||||
name: 'Holy Wow Cacao',
|
||||
category: 'goods',
|
||||
town: 'Tzununa',
|
||||
social: {
|
||||
facebook: 'https://www.facebook.com/HolyWowCacao'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '25',
|
||||
name: 'Multiservicios Yaxon',
|
||||
category: 'services',
|
||||
town: 'Tzununa',
|
||||
social: {
|
||||
facebook: 'https://www.facebook.com/Multiservicios-Yaxón-299907600397260'
|
||||
},
|
||||
local: true
|
||||
},
|
||||
{
|
||||
id: '26',
|
||||
name: 'Utz Kab',
|
||||
category: 'goods',
|
||||
town: 'San Pablo',
|
||||
social: {
|
||||
facebook: 'https://www.facebook.com/UTZ-KAB-534232490075686'
|
||||
},
|
||||
local: true
|
||||
},
|
||||
{
|
||||
id: '27',
|
||||
name: 'Utz Color Fashion',
|
||||
category: 'goods',
|
||||
town: 'San Pedro',
|
||||
social: {
|
||||
facebook: 'https://www.facebook.com/UtzColorFashion'
|
||||
},
|
||||
local: true
|
||||
},
|
||||
{
|
||||
id: '28',
|
||||
name: 'Do Bau',
|
||||
category: 'goods',
|
||||
town: 'San Pedro',
|
||||
social: {
|
||||
facebook: 'https://www.facebook.com/Adrianamatrioshka'
|
||||
},
|
||||
local: true
|
||||
},
|
||||
{
|
||||
id: '29',
|
||||
name: 'Full Print',
|
||||
category: 'services',
|
||||
town: 'San Pedro',
|
||||
social: {
|
||||
facebook: 'https://www.facebook.com/profile.php?id=100057645572968'
|
||||
},
|
||||
local: true
|
||||
},
|
||||
{
|
||||
id: '30',
|
||||
name: 'Atitlan Muay Thai',
|
||||
category: 'services',
|
||||
town: 'San Pedro',
|
||||
social: {
|
||||
facebook: 'https://www.facebook.com/muaythaiatitlan'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '31',
|
||||
name: 'Caffé Kitsch',
|
||||
category: 'restaurant',
|
||||
town: 'Panajachel',
|
||||
social: {
|
||||
facebook: 'https://www.facebook.com/Kitschers'
|
||||
},
|
||||
local: true
|
||||
},
|
||||
{
|
||||
id: '32',
|
||||
name: 'Zoe Nails & Spa',
|
||||
category: 'services',
|
||||
town: 'Panajachel',
|
||||
social: {
|
||||
facebook: 'https://www.facebook.com/zoenailsyspapanajachel'
|
||||
},
|
||||
local: true
|
||||
},
|
||||
{
|
||||
id: '33',
|
||||
name: 'Hotel Corazon del Mundo Fresh',
|
||||
category: 'lodging',
|
||||
town: 'Jaibalito',
|
||||
social: {
|
||||
facebook: 'https://www.facebook.com/corazondelmundofresh'
|
||||
},
|
||||
local: true
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue