90 lines
3.3 KiB
Vue
90 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { type DirectoryItem } from '@/types/directory'
|
|
import { MapPin, Phone, ExternalLink, Zap, MessageCircle } from 'lucide-vue-next'
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardHeader,
|
|
CardTitle,
|
|
CardDescription,
|
|
} from '@/components/ui/card'
|
|
|
|
defineProps<{
|
|
item: DirectoryItem
|
|
}>()
|
|
|
|
const categoryColors = {
|
|
restaurant: 'bg-orange-100 text-orange-800',
|
|
taxi: 'bg-yellow-100 text-yellow-800',
|
|
lancha: 'bg-blue-100 text-blue-800',
|
|
retail: 'bg-green-100 text-green-800',
|
|
other: 'bg-gray-100 text-gray-800'
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Card class="hover:shadow-md transition-shadow">
|
|
<CardContent class="p-6 space-y-4">
|
|
<!-- Image -->
|
|
<div v-if="item.imageUrl" class="aspect-video w-full overflow-hidden rounded-md">
|
|
<img :src="item.imageUrl" :alt="item.name" class="h-full w-full object-cover" />
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="space-y-3">
|
|
<div class="flex items-start justify-between">
|
|
<CardTitle>{{ item.name }}</CardTitle>
|
|
<span class="rounded-full px-2.5 py-0.5 text-xs font-semibold" :class="categoryColors[item.category]">
|
|
{{ item.category }}
|
|
</span>
|
|
</div>
|
|
|
|
<CardDescription>
|
|
{{ item.description }}
|
|
</CardDescription>
|
|
|
|
<!-- 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">
|
|
<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>
|
|
</div>
|
|
|
|
<div v-if="item.contact" class="flex items-center text-sm gap-2">
|
|
<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">
|
|
<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">
|
|
<MessageCircle 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" />
|
|
<span>{{ item.lightning }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</template>
|