Skip to content

Instantly share code, notes, and snippets.

import React, { useState, useEffect } from 'react';
import { MapPin, Gem, ChevronDown, ChevronUp, Image as ImageIcon, Search, Filter } from 'lucide-react';
// Placeholder for image fallback
const PLACEHOLDER_IMAGE_URL = (text) => `https://placehold.co/600x400/2D3748/E2E8F0?text=${encodeURIComponent(text)}`;
// Mock Data (from your provided snippet)
const initialMockRockhoundingLocations = [
{ id: '1', name: 'Topaz Mountain', lat: 39.7275, lng: -113.2314, type: 'Volcanic', description: 'Famous for its topaz, red beryl, and other minerals. Requires digging and sifting.', minerals: ['Topaz', 'Red Beryl', 'Obsidian', 'Hematite'], images: ['https://images.unsplash.com/photo-1587398309830-9297410029cf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dG9wYXp8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60', 'https://images.unsplash.com/photo-1618630676950-f8bd34077137?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bWluZXJhbHMlMjByZWR8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60'], difficulty: 'Moderat