88 lines
3.5 KiB
Vue
88 lines
3.5 KiB
Vue
<script setup>
|
|
import DashboardLayout from '../layouts/DashboardLayout.vue'
|
|
|
|
const integrations = [
|
|
{
|
|
name: 'Google Maps',
|
|
package: '@googlemaps/js-api-loader',
|
|
description: 'Full-featured maps with Places, Directions, and Street View. Requires an API key.',
|
|
docs: 'https://developers.google.com/maps/documentation/javascript',
|
|
},
|
|
{
|
|
name: 'Mapbox GL JS',
|
|
package: 'mapbox-gl',
|
|
description: 'High-performance vector tile maps with rich customization and offline support.',
|
|
docs: 'https://docs.mapbox.com/mapbox-gl-js/',
|
|
},
|
|
{
|
|
name: 'Leaflet + vue-leaflet',
|
|
package: '@vue-leaflet/vue-leaflet',
|
|
description: 'Lightweight, open-source maps using OpenStreetMap tiles. No API key required.',
|
|
docs: 'https://vue-leaflet.github.io/vue-leaflet/',
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<DashboardLayout>
|
|
<div class="space-y-6">
|
|
|
|
<!-- Placeholder map area -->
|
|
<div class="relative overflow-hidden rounded-2xl bg-white shadow-soft-md">
|
|
<div class="flex h-96 items-center justify-center bg-gradient-to-br from-gray-100 to-gray-200">
|
|
<!-- Grid lines to suggest a map -->
|
|
<svg class="absolute inset-0 h-full w-full opacity-30" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
|
|
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#adb5bd" stroke-width="0.5"/>
|
|
</pattern>
|
|
</defs>
|
|
<rect width="100%" height="100%" fill="url(#grid)" />
|
|
</svg>
|
|
|
|
<!-- Simulated pin -->
|
|
<div class="relative flex flex-col items-center">
|
|
<div class="flex h-14 w-14 items-center justify-center rounded-full bg-gradient-primary shadow-primary">
|
|
<span class="material-icons text-2xl text-white">place</span>
|
|
</div>
|
|
<div class="-mt-1 h-3 w-px bg-primary" />
|
|
<div class="mt-4 rounded-xl bg-white px-6 py-4 shadow-soft-lg text-center">
|
|
<p class="text-sm font-bold text-dark">Map Integration</p>
|
|
<p class="text-xs text-secondary">Mount your map library component here</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Integration options -->
|
|
<div class="rounded-2xl bg-white p-6 shadow-soft-md">
|
|
<h6 class="mb-1 text-sm font-bold text-dark">Recommended Integrations</h6>
|
|
<p class="mb-6 text-xs text-secondary">
|
|
Maps require a third-party library. Choose one and mount it inside
|
|
<code class="rounded bg-gray-100 px-1.5 py-0.5 font-mono text-xs text-primary">MapsView.vue</code>.
|
|
</p>
|
|
<div class="grid gap-4 sm:grid-cols-3">
|
|
<div
|
|
v-for="lib in integrations"
|
|
:key="lib.name"
|
|
class="rounded-xl border border-gray-200 p-4 transition-shadow hover:shadow-soft-sm"
|
|
>
|
|
<p class="font-semibold text-dark text-sm">{{ lib.name }}</p>
|
|
<code class="mt-1 block text-xs text-secondary font-mono">{{ lib.package }}</code>
|
|
<p class="mt-2 text-xs text-secondary leading-relaxed">{{ lib.description }}</p>
|
|
<a
|
|
:href="lib.docs"
|
|
target="_blank"
|
|
rel="noopener"
|
|
class="mt-3 inline-flex items-center gap-1 text-xs font-medium text-primary hover:underline"
|
|
>
|
|
Docs <span class="material-icons text-xs leading-none">open_in_new</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</DashboardLayout>
|
|
</template>
|