initial layout with navbar and pages
This commit is contained in:
parent
0c6844cbef
commit
aa18a42b4b
9 changed files with 329 additions and 46 deletions
15
src/App.vue
15
src/App.vue
|
|
@ -1,17 +1,14 @@
|
|||
<script setup lang="ts">
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
import Navbar from './components/layout/Navbar.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<a href="https://vite.dev" target="_blank">
|
||||
<img src="/vite.svg" class="logo" alt="Vite logo" />
|
||||
</a>
|
||||
<a href="https://vuejs.org/" target="_blank">
|
||||
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
|
||||
</a>
|
||||
<div class="min-h-screen bg-background">
|
||||
<Navbar />
|
||||
<main>
|
||||
<router-view></router-view>
|
||||
</main>
|
||||
</div>
|
||||
<HelloWorld msg="Vite + Vue" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -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,14 +38,37 @@ 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>
|
||||
|
|
|
|||
57
src/components/directory/DirectoryFilter.vue
Normal file
57
src/components/directory/DirectoryFilter.vue
Normal 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>
|
||||
|
|
@ -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'
|
||||
|
|
@ -25,26 +25,16 @@ 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>
|
||||
|
|
|
|||
87
src/components/layout/Navbar.vue
Normal file
87
src/components/layout/Navbar.vue
Normal 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>
|
||||
48
src/pages/Directory.vue
Normal file
48
src/pages/Directory.vue
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<script setup lang="ts">
|
||||
import DirectoryGrid from '@/components/directory/DirectoryGrid.vue'
|
||||
import { type DirectoryItem } from '@/types/directory'
|
||||
|
||||
// This is temporary mock data - we'll replace it with real data later
|
||||
const mockItems: DirectoryItem[] = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Ixchel Cafe & Bakery',
|
||||
category: 'restaurant',
|
||||
description: 'A cozy cafe serving great coffee and accepting Bitcoin Lightning payments.',
|
||||
town: 'San Marcos',
|
||||
mapsUrl: 'https://maps.app.goo.gl/sbjmvqP8U4SB4FS29',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Axel',
|
||||
category: 'taxi',
|
||||
town: 'San Marcos',
|
||||
contact: '+502 3846 1220',
|
||||
contactType: ['whatsapp', 'telegram'],
|
||||
lightning: 'axel@atitlan.io'
|
||||
},
|
||||
{
|
||||
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'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<div class="max-w-4xl mx-auto mb-8">
|
||||
<h1 class="text-3xl font-bold tracking-tight sm:text-4xl mb-4">
|
||||
Lightning Payment Directory
|
||||
</h1>
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Browse businesses and services that accept Bitcoin Lightning payments in your area.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<DirectoryGrid :items="mockItems" />
|
||||
</div>
|
||||
</template>
|
||||
52
src/pages/FAQ.vue
Normal file
52
src/pages/FAQ.vue
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
interface FAQ {
|
||||
question: string
|
||||
answer: string
|
||||
}
|
||||
|
||||
const faqs = ref<FAQ[]>([
|
||||
{
|
||||
question: "What is Bitcoin Lightning?",
|
||||
answer: "Bitcoin Lightning is a layer 2 payment protocol that operates on top of the Bitcoin blockchain. It enables instant, low-cost transactions between participating nodes, making it ideal for everyday purchases."
|
||||
},
|
||||
{
|
||||
question: "How do I pay with Lightning?",
|
||||
answer: "To pay with Lightning, you'll need a Lightning-enabled Bitcoin wallet. When making a purchase, simply scan the merchant's QR code with your wallet and confirm the payment. The transaction is nearly instant!"
|
||||
},
|
||||
{
|
||||
question: "Is Lightning safe to use?",
|
||||
answer: "Yes, Lightning is secure as it inherits Bitcoin's security model. While it operates differently from base-layer Bitcoin transactions, it maintains high security standards through smart contract technology."
|
||||
},
|
||||
{
|
||||
question: "How can I list my business?",
|
||||
answer: "If you're a business accepting Lightning payments and would like to be listed in our directory, please contact us through our submission form [coming soon]."
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h1 class="text-3xl font-bold tracking-tight sm:text-4xl mb-8">
|
||||
Frequently Asked Questions
|
||||
</h1>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div
|
||||
v-for="(faq, index) in faqs"
|
||||
:key="index"
|
||||
class="rounded-lg border bg-card p-6"
|
||||
>
|
||||
<h3 class="text-lg font-semibold mb-2">
|
||||
{{ faq.question }}
|
||||
</h3>
|
||||
<p class="text-muted-foreground">
|
||||
{{ faq.answer }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
32
src/pages/Home.vue
Normal file
32
src/pages/Home.vue
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<div class="max-w-4xl mx-auto text-center space-y-8">
|
||||
<h1 class="text-4xl font-bold tracking-tight sm:text-6xl">
|
||||
Find Bitcoin Lightning Payments
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Discover local businesses, services, and venues that accept Bitcoin Lightning payments.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<router-link
|
||||
to="/directory"
|
||||
class="inline-flex items-center justify-center rounded-md bg-primary px-6 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90"
|
||||
>
|
||||
Browse Directory
|
||||
</router-link>
|
||||
|
||||
<router-link
|
||||
to="/faq"
|
||||
class="inline-flex items-center justify-center rounded-md border border-input bg-background px-6 py-3 text-sm font-medium hover:bg-accent hover:text-accent-foreground"
|
||||
>
|
||||
Learn More
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,10 +1,14 @@
|
|||
export interface DirectoryItem {
|
||||
id: string
|
||||
name: string
|
||||
category: 'restaurant' | 'taxi' | 'ferry' | 'retail' | 'other'
|
||||
description: string
|
||||
category: 'restaurant' | 'taxi' | 'lancha' | 'retail' | 'other'
|
||||
description?: string
|
||||
address?: string
|
||||
town?: string
|
||||
mapsUrl?: string
|
||||
contact?: string
|
||||
contactType?: ('whatsapp' | 'telegram')[]
|
||||
lightning?: string
|
||||
coordinates?: {
|
||||
lat: number
|
||||
lng: number
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue