Filters

setSearchTerm(e.target.value)} name="search" />

{[ { name: "region", icon: "globe-americas", label: "Regions", }, { name: "species", icon: "seedling", label: "Species" }, { name: "variety", icon: "leaf", label: "Varieties" }, { name: "roast", icon: "fire", label: "Roasts" }, { name: "altitude", icon: "mountain", label: "Altitudes" }, { name: "processing", icon: "industry", label: "Processing Methods", }, { name: "certification", icon: "certificate", label: "Certifications", }, ].map((filter) => (

))}

Coffee List{" "} ({filteredCoffee.length} results)

{filteredCoffee.map((coffee) => (

{ setSelectedLocation({ lat: coffee.latitude, lng: coffee.longitude, }); setSelectedCoffee(coffee); }} onMouseEnter={() => setHoveredCoffee(coffee)} onMouseLeave={() => setHoveredCoffee(null)} >

{coffee.name}

{[ { icon: "map-marker-alt", value: `${coffee.country} (${coffee.latitude.toFixed(2)}, ${coffee.longitude.toFixed(2)})`, }, { icon: "mountain", value: coffee.altitude }, { icon: "coffee", value: `${coffee.roast} Roast` }, { icon: "leaf", value: coffee.flavor }, { icon: "industry", value: coffee.processing }, { icon: "certificate", value: coffee.certification }, { icon: "seedling", value: coffee.species }, { icon: "spa", value: coffee.variety }, ].map( (item, index) => item.value && (

{item.value}

), )}

))}

{hoveredCoffee && (

{hoveredCoffee.name}

{hoveredCoffee.flavor}

)}

{selectedCoffee && (

{selectedCoffee.name}

{loading ? (

Loading origin information...

) : (

{originInfo}

)}

); }