andy/food
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add light/dark mode with toggle, fix all theme-aware text colors

Browse Source
This commit is contained in:
Andy
2026-03-21 12:18:14 +00:00
parent 4741546adf
commit 75e1d0083f
9 changed files with 211 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/components/MapView.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import { useEffect, useRef } from "react"
import { useEffect } from "react"
import { MapContainer, TileLayer, Marker, Popup, useMap } from "react-leaflet"
import L from "leaflet"
import "leaflet/dist/leaflet.css"
@@ -14,7 +14,7 @@ function createAmberIcon(isSelected: boolean) {
<svg width="${size}" height="${size}" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="14" r="10" fill="${isSelected ? "#f59e0b" : "#d97706"}" stroke="${isSelected ? "#fff" : "#f59e0b"}" stroke-width="2"/>
<path d="M16 28 L10 20 Q16 22 22 20 Z" fill="${isSelected ? "#f59e0b" : "#d97706"}"/>
<circle cx="16" cy="14" r="4" fill="${isSelected ? "#000" : "#0d0d0d"}"/>
<circle cx="16" cy="14" r="4" fill="${isSelected ? "#000" : "#333"}"/>
</svg>
`
return L.divIcon({
@@ -53,24 +53,30 @@ interface Props {
restaurants: Restaurant[]
selectedId: string | null
onSelect: (id: string | null) => void
theme?: "light" | "dark"
}
export default function MapView({ restaurants, selectedId, onSelect }: Props) {
export default function MapView({ restaurants, selectedId, onSelect, theme = "dark" }: Props) {
const center: [number, number] =
restaurants.length > 0
? [restaurants[0].lat, restaurants[0].lng]
: [51.5, 10]
const tileUrl = theme === "dark"
? "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"
: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png"
return (
<MapContainer
center={center}
zoom={5}
style={{ height: "100%", width: "100%", background: "#0d0d0d" }}
style={{ height: "100%", width: "100%", background: theme === "dark" ? "#0d0d0d" : "#f0f0f0" }}
zoomControl={false}
>
<TileLayer
key={tileUrl}
attribution='&copy; <a href="https://carto.com/">CARTO</a>'
url="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"
url={tileUrl}
subdomains="abcd"
maxZoom={20}
/>
@@ -88,8 +94,8 @@ export default function MapView({ restaurants, selectedId, onSelect }: Props) {
>
<Popup>
<div className="min-w-[180px]">
<p className="font-bold text-[#f5f5f5] text-base leading-tight">{r.name}</p>
<p className="text-white/50 text-xs mt-1">
<p className="font-bold text-base leading-tight">{r.name}</p>
<p className="text-xs mt-1 opacity-50">
{r.city}, {r.country}
</p>
<div className="flex flex-wrap gap-1 mt-2">
@@ -106,7 +112,7 @@ export default function MapView({ restaurants, selectedId, onSelect }: Props) {
<span className="text-[#f59e0b] font-black text-lg">
{avgRating(r).toFixed(1)}
</span>
<span className="text-white/40 text-xs">
<span className="text-xs opacity-40">
{r.visits.length} {r.visits.length === 1 ? "visit" : "visits"}
</span>
</div>