andras/perfect-postcode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Spice up website

Browse source
This commit is contained in:
Andras Schmelczer 2026-01-31 22:04:28 +00:00
parent f7d586a1e9
commit 7627818e98
9 changed files with 831 additions and 164 deletions
Download patch file Download diff file Expand all files Collapse all files

26
frontend/src/components/POIPane.tsx
View file

@ -61,7 +61,7 @@ export default function POIPane({
<Label>Categories</Label>
<button
onClick={() => setDropdownOpen(!dropdownOpen)}
className="w-full flex items-center justify-between px-3 py-2 text-sm border border-slate-300 rounded hover:border-slate-400 bg-white"
className="w-full flex items-center justify-between px-3 py-2 text-sm border border-warm-300 rounded hover:border-warm-400 bg-white"
>
<span className="truncate text-left">
{selectedCount === 0
@ -81,30 +81,30 @@ export default function POIPane({
</button>
{dropdownOpen && (
<div className="border border-slate-300 rounded shadow-lg bg-white">
<div className="flex gap-2 px-3 py-2 border-b border-slate-200">
<button onClick={selectAll} className="text-xs text-blue-600 hover:text-blue-800">
<div className="border border-warm-300 rounded shadow-lg bg-white">
<div className="flex gap-2 px-3 py-2 border-b border-warm-200">
<button onClick={selectAll} className="text-xs text-teal-600 hover:text-teal-800">
All
</button>
<span className="text-xs text-slate-300">|</span>
<button onClick={selectNone} className="text-xs text-blue-600 hover:text-blue-800">
<span className="text-xs text-warm-300">|</span>
<button onClick={selectNone} className="text-xs text-teal-600 hover:text-teal-800">
None
</button>
</div>
<div className="px-3 py-2 border-b border-slate-200">
<div className="px-3 py-2 border-b border-warm-200">
<input
type="text"
placeholder="Search categories..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full px-2 py-1 text-sm border border-slate-300 rounded"
className="w-full px-2 py-1 text-sm border border-warm-300 rounded"
/>
</div>
<div className="max-h-96 overflow-y-auto py-1">
{filteredCategories.map((category) => (
<label
key={category}
className="flex items-center gap-2 px-3 py-1.5 hover:bg-slate-50 cursor-pointer"
className="flex items-center gap-2 px-3 py-1.5 hover:bg-warm-50 cursor-pointer"
>
<input
type="checkbox"
@ -121,17 +121,17 @@ export default function POIPane({
</div>
{selectedCount > 0 && (
<div className="p-3 bg-blue-50 rounded text-sm">
<div className="font-medium text-blue-900">
<div className="p-3 bg-teal-50 rounded text-sm">
<div className="font-medium text-teal-900">
{poiCount.toLocaleString()} POI{poiCount !== 1 ? 's' : ''} visible
</div>
<div className="text-xs text-blue-700 mt-1">
<div className="text-xs text-teal-700 mt-1">
{selectedCount} categor{selectedCount !== 1 ? 'ies' : 'y'} selected
</div>
</div>
)}
<div className="p-3 bg-slate-100 rounded text-xs text-slate-600">
<div className="p-3 bg-warm-100 rounded text-xs text-warm-600">
<p>Select categories to display POIs on the map.</p>
<p className="mt-2">Zoom in for better visibility of individual locations.</p>
</div>