{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "leaflet-neighborhood-walkscore-card", "title": "Leaflet Neighborhood Walkscore Card", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/leaflet-neighborhood-walkscore-card/LeafletNeighborhoodWalkscoreCard.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Footprints,\n Bus,\n Bike,\n MapPin,\n Search,\n Navigation,\n School,\n TreePine,\n Coffee,\n GraduationCap,\n UtensilsCrossed,\n Car,\n Train,\n Clock,\n Share2,\n Bookmark,\n Check,\n ArrowUpRight,\n ShieldCheck,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\nimport { Separator } from '@/components/ui/separator'\nimport { LeafletCircle, LeafletMap, LeafletMarker } from '@/components/ui/leaflet-map'\n\nexport type PoiCategoryType = 'all' | 'transit' | 'dining' | 'schools' | 'parks'\nexport type CommuteMode = 'all' | 'transit' | 'drive'\n\nexport interface MobilityScore {\n score: number\n maxScore?: number\n label: string\n verdict: string\n description: string\n verdictClass: string\n gaugeColor: string\n subtext: string\n highlights: string[]\n}\n\nexport interface PoiItem {\n id: string\n name: string\n category: 'transit' | 'dining' | 'schools' | 'parks'\n categoryLabel: string\n distance: string\n timeWalk?: string\n timeDrive?: string\n rating?: string\n badge?: string\n description: string\n address: string\n coords?: [number, number]\n}\n\nexport interface CommuteDestination {\n id: string\n name: string\n region: string\n distance: string\n transitTime: number\n transitLabel: string\n transitRoute: string\n driveTime: number\n driveLabel: string\n driveRoute: string\n peakRushTime?: string\n}\n\nexport interface LeafletNeighborhoodWalkscoreCardProps {\n title?: string\n address?: string\n neighborhood?: string\n city?: string\n zipCode?: string\n walkScore?: MobilityScore\n transitScore?: MobilityScore\n bikeScore?: MobilityScore\n pois?: PoiItem[]\n commutes?: CommuteDestination[]\n className?: string\n}\n\nconst defaultWalkScore: MobilityScore = {\n score: 94,\n maxScore: 100,\n label: 'Walk Score®',\n verdict: \"Walker's Paradise\",\n description: 'Daily errands do not require a car',\n verdictClass: 'text-success',\n gaugeColor: '#10b981',\n subtext: '94 out of 100 on walkable street accessibility',\n highlights: ['48 amenities within 10-min walk', '98% continuous sidewalks', 'Pedestrian safety grade: A+'],\n}\n\nconst defaultTransitScore: MobilityScore = {\n score: 82,\n maxScore: 100,\n label: 'Transit Score®',\n verdict: 'Excellent Transit',\n description: '6 nearby bus & light rail routes',\n verdictClass: 'text-info',\n gaugeColor: '#0ea5e9',\n subtext: '82 out of 100 on public transportation connectivity',\n highlights: ['Metro A Line station in 4 min', '5 frequent municipal bus routes', '18 min direct train to DTLA'],\n}\n\nconst defaultBikeScore: MobilityScore = {\n score: 88,\n maxScore: 100,\n label: 'Bike Score®',\n verdict: 'Very Bikeable',\n description: 'Dedicated bike lanes and flat terrain',\n verdictClass: 'text-chart-1',\n gaugeColor: 'var(--chart-1)',\n subtext: '88 out of 100 on cycling infrastructure & slope',\n highlights: ['14 miles of protected bike lanes', '<2% average street gradient', '3 bikeshare docks nearby'],\n}\n\nconst defaultPois: PoiItem[] = [\n {\n id: 'poi-1',\n name: 'Metro A Line Station',\n category: 'transit',\n categoryLabel: 'Public Transit',\n distance: '0.2 mi',\n timeWalk: '4 min walk',\n badge: 'Light Rail',\n description: 'High-frequency light rail connecting Pasadena directly to Downtown LA and Long Beach.',\n address: 'Del Mar Ave & S Raymond Ave',\n },\n {\n id: 'poi-2',\n name: 'Pasadena Transit Bus Stop',\n category: 'transit',\n categoryLabel: 'Public Transit',\n distance: '0.1 mi',\n timeWalk: '2 min walk',\n badge: 'Local Transit',\n description: 'Direct routes 10 & 20 connecting South Lake District to Old Town & City Hall.',\n address: 'S Lake Ave & E Green St',\n },\n {\n id: 'poi-3',\n name: 'Memorial Park Station',\n category: 'transit',\n categoryLabel: 'Public Transit',\n distance: '0.5 mi',\n timeWalk: '10 min walk',\n badge: 'Light Rail',\n description: 'Alternative metro access with regional bus connection bays and bike lockups.',\n address: '125 E Holly St',\n },\n {\n id: 'poi-4',\n name: 'Blue Bottle Coffee',\n category: 'dining',\n categoryLabel: 'Dining & Coffee',\n distance: '0.1 mi',\n timeWalk: '2 min walk',\n rating: '4.8 ★',\n badge: 'Artisanal Cafe',\n description: 'Specialty pour-over coffee, single-origin espresso drinks, and fresh bakery pastries.',\n address: '60 S Lake Ave',\n },\n {\n id: 'poi-5',\n name: 'Whole Foods Market',\n category: 'dining',\n categoryLabel: 'Dining & Coffee',\n distance: '0.3 mi',\n timeWalk: '6 min walk',\n rating: '4.7 ★',\n badge: 'Organic Grocery',\n description: 'Full-service natural grocer with organic produce, prepared hot bar, and wellness center.',\n address: '3751 E Foothill Blvd / Arroyo Pkwy',\n },\n {\n id: 'poi-6',\n name: \"Trader Joe's\",\n category: 'dining',\n categoryLabel: 'Dining & Coffee',\n distance: '0.4 mi',\n timeWalk: '8 min walk',\n rating: '4.9 ★',\n badge: 'Grocery',\n description: 'Neighborhood market renowned for unique provisions, fresh bakery, and wine selection.',\n address: '610 S Lake Ave',\n },\n {\n id: 'poi-7',\n name: 'Urth Caffe Pasadena',\n category: 'dining',\n categoryLabel: 'Dining & Coffee',\n distance: '0.2 mi',\n timeWalk: '5 min walk',\n rating: '4.6 ★',\n badge: 'Organic Eatery',\n description: 'Vibrant indoor/outdoor patio serving farm-to-table organic breakfast, lunch, and matcha.',\n address: '594 E Colorado Blvd',\n },\n {\n id: 'poi-8',\n name: 'Pasadena High School',\n category: 'schools',\n categoryLabel: 'Schools & Education',\n distance: '0.6 mi',\n timeWalk: '12 min walk',\n rating: '9/10',\n badge: 'Public 9-12',\n description: 'Top-rated public high school with Law and Creative Arts academies and AP honors programs.',\n address: '2925 E Sierra Madre Blvd',\n },\n {\n id: 'poi-9',\n name: 'Caltech Campus',\n category: 'schools',\n categoryLabel: 'Schools & Education',\n distance: '0.8 mi',\n timeWalk: '15 min walk',\n rating: 'Top Tier',\n badge: 'Higher Education',\n description: 'World-renowned private science & engineering research university campus and open grounds.',\n address: '1200 E California Blvd',\n },\n {\n id: 'poi-10',\n name: 'McKinley Elementary School',\n category: 'schools',\n categoryLabel: 'Schools & Education',\n distance: '0.4 mi',\n timeWalk: '8 min walk',\n rating: '8/10',\n badge: 'Public K-8',\n description: 'STEAM-focused neighborhood magnet school with dual-language immersion track.',\n address: '325 S Oak Knoll Ave',\n },\n {\n id: 'poi-11',\n name: 'Central Park',\n category: 'parks',\n categoryLabel: 'Parks & Recreation',\n distance: '0.3 mi',\n timeWalk: '6 min walk',\n rating: '4.8 ★',\n badge: 'Public Park',\n description: 'Historic shaded park with rolling green lawns, dedicated dog park, and lawn bowling greens.',\n address: '275 S Raymond Ave',\n },\n {\n id: 'poi-12',\n name: 'Rose Bowl Aquatics Center',\n category: 'parks',\n categoryLabel: 'Parks & Recreation',\n distance: '1.4 mi',\n timeDrive: '5 min drive',\n rating: '4.9 ★',\n badge: 'Sports Complex',\n description: 'Twin Olympic 50-meter pools, fitness facilities, and adjacent Arroyo Seco running trails.',\n address: '360 N Arroyo Blvd',\n },\n]\n\nconst defaultCommutes: CommuteDestination[] = [\n {\n id: 'commute-dtla',\n name: 'Downtown Los Angeles',\n region: 'Financial District & Union Station',\n distance: '10.4 mi',\n transitTime: 18,\n transitLabel: '18m by train',\n transitRoute: 'Metro A Line (Direct Express)',\n driveTime: 24,\n driveLabel: '24m by car',\n driveRoute: 'via CA-110 S Freeway',\n peakRushTime: '28-34m at 8:30 AM',\n },\n {\n id: 'commute-sm',\n name: 'Santa Monica',\n region: 'Silicon Beach & Pier',\n distance: '26.2 mi',\n transitTime: 62,\n transitLabel: '62m by train',\n transitRoute: 'Metro A Line → Metro E Line',\n driveTime: 45,\n driveLabel: '45m by car',\n driveRoute: 'via I-10 W / CA-110 S',\n peakRushTime: '55-68m at 8:30 AM',\n },\n {\n id: 'commute-burbank',\n name: 'Burbank Media District',\n region: 'Warner Bros & Disney Studios',\n distance: '12.1 mi',\n transitTime: 38,\n transitLabel: '38m by transit',\n transitRoute: 'Metro Bus 501 Rapid',\n driveTime: 22,\n driveLabel: '22m by car',\n driveRoute: 'via CA-134 W Express',\n peakRushTime: '26-32m at 8:30 AM',\n },\n {\n id: 'commute-century',\n name: 'Century City / Westwood',\n region: 'Fox Studios & UCLA Area',\n distance: '21.5 mi',\n transitTime: 54,\n transitLabel: '54m by transit',\n transitRoute: 'Commuter Express 423',\n driveTime: 38,\n driveLabel: '38m by car',\n driveRoute: 'via CA-134 W to I-405 S',\n peakRushTime: '48-58m at 8:30 AM',\n },\n]\n\n// Subject property (742 Evergreen Terrace, Pasadena) — map center, home marker,\n// and the 15-minute walkshed circle all anchor here.\nconst HOME_CENTER: [number, number] = [-118.1445, 34.1478]\n// ~15-minute pedestrian catchment (~1.2 km at typical walking speed).\nconst WALK_RADIUS_METERS = 1200\n\nconst defaultPoiCoords: Record = {\n 'poi-1': [-118.148, 34.141],\n 'poi-2': [-118.132, 34.152],\n 'poi-3': [-118.149, 34.148],\n 'poi-4': [-118.133, 34.144],\n 'poi-5': [-118.149, 34.135],\n 'poi-6': [-118.132, 34.136],\n 'poi-7': [-118.136, 34.146],\n 'poi-8': [-118.125, 34.155],\n 'poi-9': [-118.138, 34.138],\n 'poi-10': [-118.148, 34.143],\n 'poi-11': [-118.142, 34.133],\n}\n\nexport function LeafletNeighborhoodWalkscoreCard({\n title = 'Neighborhood & Location Intelligence',\n address = '742 Evergreen Terrace, Pasadena, CA 91101',\n neighborhood = 'South Lake Commercial & Arts District',\n city = 'Pasadena',\n zipCode = '91101',\n walkScore = defaultWalkScore,\n transitScore = defaultTransitScore,\n bikeScore = defaultBikeScore,\n pois = defaultPois,\n commutes = defaultCommutes,\n className,\n}: LeafletNeighborhoodWalkscoreCardProps) {\n const [selectedCategory, setSelectedCategory] = React.useState('all')\n const [searchQuery, setSearchQuery] = React.useState('')\n const [selectedCommuteMode, setSelectedCommuteMode] = React.useState('all')\n const [isSaved, setIsSaved] = React.useState(false)\n const [isCopied, setIsCopied] = React.useState(false)\n\n const categoriesList = [\n { id: 'all' as const, label: 'All Places', count: pois.length },\n {\n id: 'transit' as const,\n label: 'Public Transit',\n count: pois.filter((p) => p.category === 'transit').length,\n },\n {\n id: 'dining' as const,\n label: 'Dining & Coffee',\n count: pois.filter((p) => p.category === 'dining').length,\n },\n {\n id: 'schools' as const,\n label: 'Schools & Education',\n count: pois.filter((p) => p.category === 'schools').length,\n },\n {\n id: 'parks' as const,\n label: 'Parks & Rec',\n count: pois.filter((p) => p.category === 'parks').length,\n },\n ]\n\n const filteredPois = React.useMemo(() => {\n return pois.filter((poi) => {\n const matchesCat = selectedCategory === 'all' || poi.category === selectedCategory\n const matchesSearch =\n searchQuery.trim() === '' ||\n poi.name.toLowerCase().includes(searchQuery.toLowerCase()) ||\n poi.description.toLowerCase().includes(searchQuery.toLowerCase()) ||\n poi.address.toLowerCase().includes(searchQuery.toLowerCase()) ||\n (poi.badge && poi.badge.toLowerCase().includes(searchQuery.toLowerCase()))\n return matchesCat && matchesSearch\n })\n }, [pois, selectedCategory, searchQuery])\n\n const handleCopyAddress = () => {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText(`${address}, ${neighborhood}`)\n setIsCopied(true)\n setTimeout(() => {\n setIsCopied(false)\n }, 2000)\n }\n }\n\n // Circular gauge calculation helper (radius 38, perimeter ~238.76)\n const circumference = 2 * Math.PI * 38\n const getGaugeDashOffset = (score: number): number => {\n const clamped = Math.min(100, Math.max(0, score))\n return circumference - (clamped / 100) * circumference\n }\n\n const getPoiCoords = (poi: PoiItem): [number, number] => {\n if (poi.coords) return poi.coords\n return (\n defaultPoiCoords[poi.id] || [\n HOME_CENTER[0] + Math.sin(poi.name.length) * 0.008,\n HOME_CENTER[1] + Math.cos(poi.name.length) * 0.008,\n ]\n )\n }\n\n return (\n
\n {/* Header Banner Card */}\n \n \n
\n
\n {/* Badges Bar */}\n
\n \n \n \n {city} · {zipCode}\n \n \n \n \n Walker's Paradise\n \n \n Urban Transit Hub\n \n
\n\n {/* Title & Address */}\n
\n

{title}

\n

{address}

\n

\n Neighborhood: {neighborhood}\n

\n
\n
\n\n {/* Top Actions */}\n
\n \n {isCopied ? : }\n {isCopied ? 'Address Copied' : 'Share Location'}\n \n\n setIsSaved(!isSaved)}\n >\n \n {isSaved ? 'Saved Neighborhood' : 'Save Area'}\n \n
\n
\n \n \n\n {/* Section 1: 3 Primary Mobility Score Cards */}\n
\n {/* Card 1: Walk Score */}\n \n \n
\n
\n
\n \n
\n
\n {walkScore.label}\n Pedestrian Index\n
\n
\n \n {walkScore.score}/100\n \n
\n \n\n \n {/* Circular Gauge & Score Verdict */}\n
\n
\n \n \n \n \n
\n \n {walkScore.score}\n \n / 100\n
\n
\n\n
\n
{walkScore.verdict}
\n

{walkScore.description}

\n
\n
\n\n \n\n {/* Key Highlights */}\n
\n

Mobility Highlights

\n
    \n {walkScore.highlights.map((item, idx) => (\n
  • \n \n {item}\n
    • \n ))}\n
\n
\n \n \n\n {/* Card 2: Transit Score */}\n \n \n
\n
\n
\n \n
\n
\n {transitScore.label}\n Transit Connectivity\n
\n
\n \n {transitScore.score}/100\n \n
\n \n\n \n {/* Circular Gauge & Score Verdict */}\n
\n
\n \n \n \n \n
\n \n {transitScore.score}\n \n / 100\n
\n
\n\n
\n
{transitScore.verdict}
\n

{transitScore.description}

\n
\n
\n\n \n\n {/* Key Highlights */}\n
\n

Transit Highlights

\n
    \n {transitScore.highlights.map((item, idx) => (\n
  • \n \n {item}\n
    • \n ))}\n
\n
\n \n \n\n {/* Card 3: Bike Score */}\n \n \n
\n
\n
\n \n
\n
\n {bikeScore.label}\n Cycling Grid\n
\n
\n \n {bikeScore.score}/100\n \n
\n \n\n \n {/* Circular Gauge & Score Verdict */}\n
\n
\n \n \n \n \n
\n \n {bikeScore.score}\n \n / 100\n
\n
\n\n
\n
{bikeScore.verdict}
\n

{bikeScore.description}

\n
\n
\n\n \n\n {/* Key Highlights */}\n
\n

Cycling Highlights

\n
    \n {bikeScore.highlights.map((item, idx) => (\n
  • \n \n {item}\n
    • \n ))}\n
\n
\n \n \n
\n\n {/* Section 2: Commute Time Estimator */}\n
\n
\n
\n

Commute Time Estimator

\n

\n Estimated travel duration from 742 Evergreen Terrace to key employment & lifestyle hubs.\n

\n
\n\n {/* Mode selector filters */}\n
\n setSelectedCommuteMode('all')}\n >\n All Modes\n \n setSelectedCommuteMode('transit')}\n >\n \n Transit\n \n setSelectedCommuteMode('drive')}\n >\n \n Driving\n \n
\n
\n\n \n
\n {commutes.map((commute) => (\n
\n
\n {/* Destination Info */}\n
\n
\n

{commute.name}

\n · {commute.distance}\n
\n

{commute.region}

\n
\n\n {/* Time Badges & Routes */}\n
\n {/* Transit Mode Pill */}\n {(selectedCommuteMode === 'all' || selectedCommuteMode === 'transit') && (\n
\n \n
\n \n {commute.transitLabel}\n \n \n
\n
\n )}\n\n {/* Drive Mode Pill */}\n {(selectedCommuteMode === 'all' || selectedCommuteMode === 'drive') && (\n
\n \n
\n \n {commute.driveLabel}\n \n \n
\n
\n )}\n\n {/* Peak Rush Info */}\n {commute.peakRushTime && (\n
\n \n Rush: {commute.peakRushTime}\n
\n )}\n
\n
\n\n {/* Visual Progress Bar for Comparative Duration */}\n
\n {(selectedCommuteMode === 'all' || selectedCommuteMode === 'transit') && (\n
\n
\n Transit Duration\n {commute.transitTime} min\n
\n \n
\n )}\n\n {(selectedCommuteMode === 'all' || selectedCommuteMode === 'drive') && (\n
\n
\n Driving Duration\n {commute.driveTime} min\n
\n \n
\n )}\n
\n
\n ))}\n
\n \n
\n\n {/* Section 3: Nearby Points of Interest Categorized List */}\n
\n
\n
\n

Nearby Points of Interest

\n

\n Key transit hubs, dining, specialty cafes, schools, and parks located within walking distance.\n

\n
\n\n
\n \n {pois.length} verified local venues\n
\n
\n\n {/* Controls: Category Filter Tabs & Search Bar */}\n
\n {/* Category Filter Tabs */}\n
\n {categoriesList.map((cat) => (\n setSelectedCategory(cat.id)}\n >\n {cat.label}\n \n ({cat.count})\n \n \n ))}\n
\n\n {/* Search Input */}\n
\n \n setSearchQuery(e.target.value)}\n placeholder=\"Search venue or street...\"\n className=\"border-border bg-background placeholder:text-muted-foreground focus-visible:ring-ring h-8 w-full rounded-md border pr-3 pl-8 text-xs focus-visible:ring-2 focus-visible:outline-none\"\n />\n
\n
\n\n {/* Interactive 15-Minute Walkshed & POI Map */}\n \n \n
\n
\n \n \n 15-Minute Walkshed & Amenity Locator\n \n \n Free OpenStreetMap/Esri basemap — no API key — with a 15-minute walk radius and categorized local\n destinations.\n \n
\n \n \n 98 Walk Score Paradise\n \n
\n \n
\n \n {/* 15-min Walk Radius Circle */}\n \n\n {/* Home Property Marker */}\n \n
\n \n
\n \n
\n
\n \n\n {/* Filtered POI Markers */}\n {filteredPois.map((poi) => (\n \n \n {poi.category === 'dining' ? (\n \n ) : poi.category === 'transit' ? (\n \n ) : poi.category === 'schools' ? (\n \n ) : (\n \n )}\n
\n \n ))}\n \n
\n \n\n {/* POIs Grid */}\n {filteredPois.length > 0 ? (\n
\n {filteredPois.map((poi) => (\n \n \n
\n {/* Icon Box based on category */}\n \n {poi.category === 'transit' && poi.badge === 'Light Rail' ? (\n \n ) : poi.category === 'transit' ? (\n \n ) : poi.category === 'dining' && poi.name.includes('Coffee') ? (\n \n ) : poi.category === 'dining' ? (\n \n ) : poi.category === 'schools' && poi.name.includes('Caltech') ? (\n \n ) : poi.category === 'schools' ? (\n \n ) : (\n \n )}\n
\n\n {/* Main POI Details */}\n
\n
\n

{poi.name}

\n\n {/* Distance / Walk Time Pill */}\n
\n {poi.distance}\n {poi.timeWalk && · {poi.timeWalk}}\n {poi.timeDrive && · {poi.timeDrive}}\n
\n
\n\n

{poi.description}

\n\n
\n {poi.address}\n
\n {poi.rating && (\n \n {poi.rating}\n \n )}\n {poi.badge && (\n \n {poi.badge}\n \n )}\n
\n
\n
\n
\n \n \n ))}\n
\n ) : (\n /* Empty State when filter yields nothing */\n \n
\n \n

No points of interest match \"{searchQuery}\"

\n

\n Try searching for other amenities like \"coffee\", \"market\", \"school\", or clear the filter.\n

\n {\n setSearchQuery('')\n setSelectedCategory('all')\n }}\n >\n Clear Filters\n \n
\n \n )}\n \n\n {/* Section 4: Quick Neighborhood Summary Footnote */}\n \n
\n
\n
\n \n

Official Location Score Intelligence Verification

\n
\n

\n Calculated based on standard 15-minute pedestrian catchment models, municipal route timetables, and GIS\n road grades.\n

\n
\n\n
\n \n \n Open in Maps\n \n
\n
\n \n \n )\n}\n\nexport default LeafletNeighborhoodWalkscoreCard\n", "type": "registry:block", "target": "~/components/blocks/LeafletNeighborhoodWalkscoreCard.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/progress.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/leaflet-map.json" ], "description": "Real estate neighborhood intelligence widget on free OpenStreetMap/Esri tiles — no API key. Walk Score, Transit Score, Bike Score, categorized points of interest (transit, dining, schools, parks), a 15-minute walk radius, and commute time estimator.", "categories": [ "real-estate", "app", "dashboard", "marketing" ] }