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>

57
src/components/directory/DirectoryFilter.vue Normal file
View file

@ -0,0 +1,57 @@
<script setup lang="ts">
import { Search } from 'lucide-vue-next'
const props = defineProps<{
category: string
search: string
}>()
const emit = defineEmits<{
'update:category': [value: string]
'update:search': [value: string]
}>()
const categories = [
{ id: 'all', label: 'All' },
{ id: 'restaurant', label: 'Restaurants' },
{ id: 'taxi', label: 'Taxis' },
{ id: 'lancha', label: 'Lanchas' },
{ id: 'retail', label: 'Retail' },
{ id: 'other', label: 'Other' }
]
</script>
<template>
<div class="w-full flex flex-col md:flex-row gap-4">
<!-- Search Input -->
<div class="relative flex-1">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<Search class="h-5 w-5 text-muted-foreground" />
</div>
<input
type="text"
:value="search"
@input="emit('update:search', ($event.target as HTMLInputElement).value)"
class="block w-full rounded-md border-input pl-10 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
placeholder="Search businesses..."
/>
</div>
<!-- Category Filter -->
<div class="flex gap-2 overflow-x-auto pb-2 md:pb-0">
<button
v-for="cat in categories"
:key="cat.id"
@click="emit('update:category', cat.id)"
class="inline-flex items-center rounded-full px-3 py-1 text-sm font-medium whitespace-nowrap transition-colors"
:class="[
category === cat.id
? 'bg-primary text-primary-foreground'
: 'bg-secondary text-secondary-foreground hover:bg-secondary/80'
]"
>
{{ cat.label }}
</button>
</div>
</div>
</template>

22
src/components/directory/DirectoryGrid.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref } from 'vue'
import { ref, computed } from 'vue'
import DirectoryCard from './DirectoryCard.vue'
import { type DirectoryItem } from '@/types/directory'
import DirectoryFilter from './DirectoryFilter.vue'
@ -15,7 +15,7 @@ const filteredItems = computed(() => {
return props.items.filter(item => {
const matchesCategory = selectedCategory.value === 'all' || item.category === selectedCategory.value
const matchesSearch = item.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
item.description.toLowerCase().includes(searchQuery.value.toLowerCase())
item.description.toLowerCase().includes(searchQuery.value.toLowerCase())
return matchesCategory && matchesSearch
})
})
@ -25,29 +25,19 @@ const filteredItems = computed(() => {
<div class="container mx-auto px-4 py-8">
<!-- Filters -->
<div class="mb-8 space-y-4 md:space-y-0 md:flex md:items-center md:justify-between">
<DirectoryFilter
v-model:category="selectedCategory"
v-model:search="searchQuery"
/>
<DirectoryFilter v-model:category="selectedCategory" v-model:search="searchQuery" />
</div>
<!-- Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<DirectoryCard
v-for="item in filteredItems"
:key="item.id"
:item="item"
/>
<DirectoryCard v-for="item in filteredItems" :key="item.id" :item="item" />
</div>
<!-- Empty State -->
<div
v-if="filteredItems.length === 0"
class="text-center py-12"
>
<div v-if="filteredItems.length === 0" class="text-center py-12">
<p class="text-lg text-muted-foreground">
No results found. Try adjusting your filters.
</p>
</div>
</div>
</template>
</template>

87
src/components/layout/Navbar.vue Normal file
View file

@ -0,0 +1,87 @@
<script setup lang="ts">
import { ref } from 'vue'
import { Menu, X } from 'lucide-vue-next'
const isOpen = ref(false)
const navigation = [
{ name: 'Home', href: '/' },
{ name: 'Directory', href: '/directory' },
{ name: 'FAQ', href: '/faq' },
]
const toggleMenu = () => {
isOpen.value = !isOpen.value
}
</script>
<template>
<nav class="bg-white shadow-sm">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="flex h-16 justify-between">
<!-- Logo and Desktop Navigation -->
<div class="flex">
<div class="flex flex-shrink-0 items-center">
<!-- Replace with your logo -->
<router-link to="/" class="text-xl font-bold">
⚡️ Lightning Directory
</router-link>
</div>
<!-- Desktop Navigation -->
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
<router-link
v-for="item in navigation"
:key="item.name"
:to="item.href"
class="inline-flex items-center px-1 pt-1 text-sm font-medium"
:class="[
$route.path === item.href
? 'border-b-2 border-primary text-gray-900'
: 'text-gray-500 hover:border-b-2 hover:border-gray-300 hover:text-gray-700'
]"
>
{{ item.name }}
</router-link>
</div>
</div>
<!-- Mobile menu button -->
<div class="flex items-center sm:hidden">
<button
type="button"
class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500"
@click="toggleMenu"
>
<span class="sr-only">Open main menu</span>
<Menu v-if="!isOpen" class="block h-6 w-6" aria-hidden="true" />
<X v-else class="block h-6 w-6" aria-hidden="true" />
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div
:class="[isOpen ? 'block' : 'hidden']"
class="sm:hidden"
>
<div class="space-y-1 pb-3 pt-2">
<router-link
v-for="item in navigation"
:key="item.name"
:to="item.href"
class="block border-l-4 py-2 pl-3 pr-4 text-base font-medium"
:class="[
$route.path === item.href
? 'border-primary bg-primary/10 text-primary'
: 'border-transparent text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700'
]"
@click="isOpen = false"
>
{{ item.name }}
</router-link>
</div>
</div>
</nav>
</template>