128 lines
4.4 KiB
TypeScript
128 lines
4.4 KiB
TypeScript
"use client"
|
|
|
|
import dynamic from "next/dynamic"
|
|
import { useState, useEffect } from "react"
|
|
import { motion } from "framer-motion"
|
|
import Link from "next/link"
|
|
import { Restaurant } from "@/app/types"
|
|
|
|
const MapView = dynamic(() => import("@/app/components/MapView"), { ssr: false })
|
|
|
|
function avgRating(restaurant: Restaurant) {
|
|
if (restaurant.visits.length === 0) return 0
|
|
return (
|
|
restaurant.visits.reduce((s, v) => s + v.rating, 0) / restaurant.visits.length
|
|
)
|
|
}
|
|
|
|
export default function MapPage() {
|
|
const [restaurants, setRestaurants] = useState<Restaurant[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [selected, setSelected] = useState<string | null>(null)
|
|
|
|
useEffect(() => {
|
|
fetch("/api/restaurants")
|
|
.then((r) => r.json())
|
|
.then((data) => {
|
|
setRestaurants(data)
|
|
setLoading(false)
|
|
})
|
|
.catch(() => setLoading(false))
|
|
}, [])
|
|
|
|
return (
|
|
<div className="flex flex-col md:flex-row h-[calc(100vh-65px)]">
|
|
{/* Map */}
|
|
<div className="flex-1 relative">
|
|
{loading ? (
|
|
<div className="flex items-center justify-center h-full bg-[#0d0d0d]">
|
|
<motion.div
|
|
animate={{ rotate: 360 }}
|
|
transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
|
|
className="w-6 h-6 border-2 border-[#f59e0b] border-t-transparent rounded-full"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<MapView
|
|
restaurants={restaurants}
|
|
selectedId={selected}
|
|
onSelect={setSelected}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{/* Desktop sidebar */}
|
|
<aside className="hidden md:flex w-80 flex-col border-l border-white/[0.06] bg-[#0d0d0d] overflow-y-auto">
|
|
<div className="p-5 border-b border-white/[0.06]">
|
|
<h2 className="text-lg font-black tracking-tight">
|
|
{restaurants.length} places
|
|
</h2>
|
|
</div>
|
|
<div className="flex-1 p-3 space-y-2">
|
|
{restaurants.map((r) => (
|
|
<button
|
|
key={r.id}
|
|
onClick={() => setSelected(r.id === selected ? null : r.id)}
|
|
className={`w-full text-left rounded-xl p-3 transition-all border ${
|
|
selected === r.id
|
|
? "bg-[#f59e0b]/10 border-[#f59e0b]/30"
|
|
: "bg-white/[0.02] border-white/[0.06] hover:bg-white/[0.05]"
|
|
}`}
|
|
>
|
|
<p className="font-semibold text-sm text-[#f5f5f5]">{r.name}</p>
|
|
<p className="text-xs text-white/40 mt-0.5">
|
|
{r.city} · {r.cuisine[0]}
|
|
</p>
|
|
<div className="flex items-center gap-2 mt-1.5">
|
|
<span className="text-[#f59e0b] text-xs font-bold">
|
|
{avgRating(r).toFixed(1)}
|
|
</span>
|
|
<span className="text-white/25 text-xs">
|
|
{r.visits.length} {r.visits.length === 1 ? "visit" : "visits"}
|
|
</span>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Mobile bottom sheet */}
|
|
<motion.div
|
|
className="md:hidden fixed bottom-16 left-0 right-0 bg-[#111]/95 backdrop-blur-xl border-t border-white/[0.06] max-h-64 overflow-y-auto z-40"
|
|
initial={{ y: 200 }}
|
|
animate={{ y: 0 }}
|
|
transition={{ delay: 0.3, duration: 0.4 }}
|
|
>
|
|
<div className="p-3 grid grid-cols-2 gap-2">
|
|
{restaurants.map((r) => (
|
|
<button
|
|
key={r.id}
|
|
onClick={() => setSelected(r.id === selected ? null : r.id)}
|
|
className={`text-left rounded-xl p-3 transition-all border ${
|
|
selected === r.id
|
|
? "bg-[#f59e0b]/10 border-[#f59e0b]/30"
|
|
: "bg-white/[0.03] border-white/[0.06]"
|
|
}`}
|
|
>
|
|
<p className="font-semibold text-xs text-[#f5f5f5] truncate">{r.name}</p>
|
|
<p className="text-[10px] text-white/40">{r.city}</p>
|
|
<span className="text-[#f59e0b] text-xs font-bold">
|
|
{avgRating(r).toFixed(1)}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
|
|
{selected && (
|
|
<Link
|
|
href={`/restaurant/${selected}`}
|
|
className="hidden md:block absolute bottom-6 right-6 bg-[#f59e0b] text-black font-bold text-sm px-4 py-2 rounded-xl hover:bg-[#d97706] transition-colors z-50"
|
|
>
|
|
View details
|
|
</Link>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|