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

initial layout with navbar and pages

Browse source
This commit is contained in:
padreug 2025-02-02 18:01:38 +01:00
parent 0c6844cbef
commit aa18a42b4b
9 changed files with 329 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<script setup lang="ts">
import { type DirectoryItem } from '@/types/directory'
import { MapPin, Phone, ExternalLink } from 'lucide-vue-next'
import { MapPin, Phone, ExternalLink, Zap, MessageCircle } from 'lucide-vue-next'
defineProps<{
item: DirectoryItem
@ -9,7 +9,7 @@ defineProps<{
const categoryColors = {
restaurant: 'bg-orange-100 text-orange-800',
taxi: 'bg-yellow-100 text-yellow-800',
ferry: 'bg-blue-100 text-blue-800',
lancha: 'bg-blue-100 text-blue-800',
retail: 'bg-green-100 text-green-800',
other: 'bg-gray-100 text-gray-800'
}
@ -20,21 +20,14 @@ const categoryColors = {
<div 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"
/>
<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">
<h3 class="font-semibold text-lg">{{ item.name }}</h3>
<span
class="rounded-full px-2.5 py-0.5 text-xs font-semibold"
:class="categoryColors[item.category]"
>
<span class="rounded-full px-2.5 py-0.5 text-xs font-semibold" :class="categoryColors[item.category]">
{{ item.category }}
</span>
</div>
@ -45,17 +38,40 @@ const categoryColors = {
<!-- Contact Info -->
<div class="space-y-2">
<div v-if="item.address" class="flex items-center text-sm">
<div v-if="item.town || item.address" class="flex items-center text-sm group">
<MapPin class="mr-2 h-4 w-4" />
<span>{{ item.address }}</span>
<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">
<Phone class="mr-2 h-4 w-4" />
<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">
<span v-if="item.contactType.includes('whatsapp')"
class="bg-green-100 text-green-800 px-2 py-0.5 rounded-full text-xs font-medium flex items-center gap-1">
<MessageCircle class="h-3 w-3" />
WhatsApp
</span>
<span v-if="item.contactType.includes('telegram')"
class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full text-xs font-medium flex items-center gap-1">
<MessageCircle class="h-3 w-3" />
Telegram
</span>
</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>
</div>
</div>
</template>
</template>