[V0_FILE]typescriptreact:file="src/App.js" import { useState } from "react" import { ThemeProvider, createTheme } from "@mui/material/styles" import CssBaseline from "@mui/material/CssBaseline" import Container from "@mui/material/Container" import Typography from "@mui/material/Typography" import Box from "@mui/material/Box" import MapSection from "./sections/MapSection" import CoffeeListSection from "./sections/CoffeeListSection" import FlavorProfileSection from "./sections/FlavorProfileSection" import { globalCoffees } from "./data/globalCoffees" import { roboto } from "./fonts/roboto" // Coffee-inspired theme const theme = createTheme({ palette: { primary: { main: "#6F4E37", }, secondary: { main: "#C19A6B", }, background: { default: "#FFF8E7", paper: "#FFFAF0", }, }, typography: { fontFamily: roboto.style.fontFamily, h1: { fontWeight: "bold" }, h2: { fontWeight: "bold" }, h3: { fontWeight: "bold" }, h4: { fontWeight: "bold" }, h5: { fontWeight: "bold" }, h6: { fontWeight: "bold" }, }, }) const App = () => { const [selectedFlavorProfile, setSelectedFlavorProfile] = useState(null) const handleFlavorProfileClick = (flavorProfile) => { setSelectedFlavorProfile(flavorProfile) } return (

Global Coffee Explorer ) } export default App [V0_FILE]typescriptreact:file="src/sections/MapSection.js" import { MapContainer, TileLayer, Marker, Popup, AttributionControl } from "react-leaflet" import "leaflet/dist/leaflet.css" import L from "leaflet" import Box from "@mui/material/Box" import Typography from "@mui/material/Typography" import { styled } from "@mui/material/styles" import ContentContainer from "../components/ContentContainer" import { getCountryCode } from "../utils/countryUtils" const customIcon = new L.Icon({ iconUrl: "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='41' viewBox='0 0 25 41'%3E%3Cpath fill='%236F4E37' d='M12.5 0C5.596 0 0 5.596 0 12.5c0 6.904 12.5 28.5 12.5 28.5S25 19.404 25 12.5C25 5.596 19.404 0 12.5 0zm0 19a6.5 6.5 0 110-13 6.5 6.5 0 010 13z'/%3E%3C/svg%3E", iconSize: [18, 29], iconAnchor: [9, 29], popupAnchor: [1, -24], }) const CustomTileLayer = ({ url, attribution }) => { return ( <> ) } const StyledPopupContent = styled(Box)(({ theme }) => ({ width: "224px", "& img.coffee-image": { width: "100%", height: "auto", objectFit: "cover", borderRadius: theme.shape.borderRadius, marginTop: theme.spacing(1), }, "& .region-flag": { width: "20px", height: "12px", marginLeft: theme.spacing(1), verticalAlign: "middle", }, })) const MapSection = ({ coffees }) => { return ( {coffees.map((coffee) => ( {coffee.name} {`Flag

{ e.target.onerror = null e.target.src = "/placeholder.svg?height=12&width=20" }} /> {coffee.origin} {coffee.name}

))} ) } export default MapSection [V0_FILE]typescriptreact:file="src/sections/CoffeeListSection.js" import { useState, useEffect } from "react" import Grid from "@mui/material/Grid" import Box from "@mui/material/Box" import Chip from "@mui/material/Chip" import CoffeeCard from "../components/CoffeeCard" import SectionTitle from "../components/SectionTitle" import ContentContainer from "../components/ContentContainer" const CoffeeListSection = ({ coffees }) => { const [selectedRegion, setSelectedRegion] = useState("All") const [filteredCoffees, setFilteredCoffees] = useState(coffees) const [regions, setRegions] = useState([]) useEffect(() => { const uniqueRegions = ["All", ...new Set(coffees.map((coffee) => coffee.region))] setRegions(uniqueRegions) }, [coffees]) const handleChipClick = (region) => { setSelectedRegion(region) } useEffect(() => { const updatedCoffees = selectedRegion === "All" ? coffees : coffees.filter((coffee) => coffee.region === selectedRegion) setFilteredCoffees(updatedCoffees) }, [selectedRegion, coffees]) return ( Explore Coffees {regions.map((region) => ( handleChipClick(region)} color={selectedRegion === region ? "primary" : "default"} variant={selectedRegion === region ? "filled" : "outlined"} /> ))} {filteredCoffees.map((coffee) => ( ))} ) } export default CoffeeListSection [V0_FILE]typescriptreact:file="src/sections/FlavorProfileSection.js" import Box from "@mui/material/Box" import Chip from "@mui/material/Chip" import SectionTitle from "../components/SectionTitle" import ContentContainer from "../components/ContentContainer" import FlavorProfileModal from "../components/FlavorProfileModal" const FlavorProfileSection = ({ coffees, onFlavorProfileClick, selectedFlavorProfile }) => { const allFlavorProfiles = [...new Set(coffees.flatMap((coffee) => coffee.flavorProfile))] const filteredCoffees = selectedFlavorProfile ? coffees.filter((coffee) => coffee.flavorProfile.includes(selectedFlavorProfile)) : [] return ( Explore by Flavor Profile {allFlavorProfiles.map((profile) => ( onFlavorProfileClick(profile)} color={selectedFlavorProfile === profile ? "primary" : "default"} /> ))} onFlavorProfileClick(null)} selectedFlavorProfile={selectedFlavorProfile} filteredCoffees={filteredCoffees} /> ) } export default FlavorProfileSection [V0_FILE]typescriptreact:file="src/components/CoffeeCard.js" import { useState, useEffect } from "react" import { Typography, Box, Chip, Card, CardContent, CardMedia } from "@mui/material" import { getCountryCode } from "../utils/countryUtils" import { extractDominantColor } from "../utils/colorExtractor" const CoffeeCard = ({ coffee }) => { const [backgroundColor, setBackgroundColor] = useState("rgb(255, 255, 255)") useEffect(() => { const fetchColor = async () => { const color = await extractDominantColor(coffee.imageUrl) setBackgroundColor(color) } fetchColor() }, [coffee.imageUrl]) return ( {coffee.name} {coffee.origin} {`Flag

{ e.target.onerror = null e.target.src = "/placeholder.svg?height=12&width=20" }} /> {coffee.description} {coffee.flavorProfile.map((flavor, index) => ( ))} ) } export default CoffeeCard [V0_FILE]typescriptreact:file="src/components/FlavorProfileModal.js" import { Box, Typography, Modal, Card, CardContent, CardMedia } from "@mui/material" import { getCountryCode } from "../utils/countryUtils" const FlavorProfileModal = ({ open, onClose, selectedFlavorProfile, filteredCoffees }) => { return ( {filteredCoffees.map((coffee) => ( {coffee.name} {coffee.origin} {`Flag

{ e.target.onerror = null e.target.src = "/placeholder.svg?height=12&width=20" }} /> Description: {coffee.description} ))} ) } export default FlavorProfileModal [V0_FILE]typescriptreact:file="src/components/SectionTitle.js" import { Typography } from "@mui/material" import { roboto } from "../fonts/roboto" const SectionTitle = ({ children }) => { return ( {children} ) } export default SectionTitle [V0_FILE]typescriptreact:file="src/components/ContentContainer.js" import { Box } from "@mui/material" const ContentContainer = ({ children, radius = "8px" }) => { return ( {children} ) } export default ContentContainer [V0_FILE]javascript:file="src/utils/countryUtils.js" export const getCountryCode = (origin) => { const countryMap = { "United States": "US", Brazil: "BR", Colombia: "CO", Ethiopia: "ET", Kenya: "KE", Indonesia: "ID", Vietnam: "VN", Guatemala: "GT", "Costa Rica": "CR", Honduras: "HN", Peru: "PE", Mexico: "MX", Nicaragua: "NI", India: "IN", Rwanda: "RW", "El Salvador": "SV", Panama: "PA", Yemen: "YE", Jamaica: "JM", Hawaii: "US", } return countryMap[origin] || "UN" } [V0_FILE]javascript:file="src/utils/colorExtractor.js" export function extractDominantColor(imageUrl) { return new Promise((resolve) => { if (typeof window === "undefined") { resolve("rgb(255, 255, 255)") // Default color for server-side rendering return } const img = new Image() img.crossOrigin = "Anonymous" img.onload = () => { const canvas = document.createElement("canvas") canvas.width = img.width canvas.height = img.height const ctx = canvas.getContext("2d") ctx.drawImage(img, 0, 0, img.width, img.height) const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height) const data = imageData.data let r = 0, g = 0, b = 0 for (let i = 0, l = data.length; i < l; i += 4) { r += data[i] g += data[i + 1] b += data[i + 2] } r = Math.floor(r / (data.length / 4)) g = Math.floor(g / (data.length / 4)) b = Math.floor(b / (data.length / 4)) resolve(`rgb(${r}, ${g}, ${b})`) } img.onerror = () => { console.error("Error loading image:", imageUrl) resolve("rgb(255, 255, 255)") // Default to white if there's an error } img.src = imageUrl }) } [V0_FILE]typescript:file="src/fonts/roboto.ts" import { Roboto } from "next/font/google" export const roboto = Roboto({ weight: ["400", "700"], style: ["normal", "italic"], subsets: ["latin"], display: "swap", }) [V0_FILE]javascript:file="src/data/globalCoffees.js" export const globalCoffees = [ { id: 1, name: "Ethiopian Yirgacheffe", origin: "Ethiopia", region: "Africa", imageUrl: "https://example.com/ethiopian-yirgacheffe.jpg", description: "Bright acidity with floral and citrus notes", flavorProfile: ["Floral", "Citrus", "Bright"], location: { lat: 6.1644, lng: 38.2062 }, }, { id: 2, name: "Colombian Supremo", origin: "Colombia", region: "South America", imageUrl: "https://example.com/colombian-supremo.jpg", description: "Well-balanced with a smooth, mild flavor", flavorProfile: ["Balanced", "Mild", "Nutty"], location: { lat: 4.5709, lng: -74.2973 }, }, { id: 3, name: "Sumatra Mandheling", origin: "Indonesia", region: "Asia", imageUrl: "https://example.com/sumatra-mandheling.jpg", description: "Full-bodied with earthy and herbal notes", flavorProfile: ["Earthy", "Herbal", "Full-bodied"], location: { lat: 3.5952, lng: 98.6722 }, }, { id: 4, name: "Kenya AA", origin: "Kenya", region: "Africa", imageUrl: "https://example.com/kenya-aa.jpg", description: "Bold and vibrant with wine-like acidity", flavorProfile: ["Bold", "Winey", "Fruity"], location: { lat: -1.2921, lng: 36.8219 }, }, { id: 5, name: "Costa Rica Tarrazu", origin: "Costa Rica", region: "Central America", imageUrl: "https://example.com/costa-rica-tarrazu.jpg", description: "Bright acidity with hints of chocolate and nuts", flavorProfile: ["Bright", "Chocolate", "Nutty"], location: { lat: 9.7489, lng: -83.7534 }, }, // Add more coffee entries as needed ]