import React, { useEffect } from "react"; import "./Map.css"; export const Map = ({ height, width, color, stroke, hoverStroke, HoverColor, data, onWilayaClick, }) => { useEffect(() => { document.documentElement.style.setProperty( "--react-algeria-map-hover-fill", HoverColor ); document.documentElement.style.setProperty( "--react-algeria-map-hover-stroke", hoverStroke ); }, [HoverColor,hoverStroke]); return ( onWilayaClick("Adrar", data["Adrar"])}> {data["Adrar"] ?? ""} onWilayaClick("Chlef", data["Chlef"])}> {data["Chlef"] ?? ""} onWilayaClick("Laghouat", data["Laghouat"])}> {data["Laghouat"] ?? ""} onWilayaClick("Oum El Bouaghi", data["Oum El Bouaghi"])} > {data["Oum El Bouaghi"] ?? ""} onWilayaClick("Batna", data["Batna"])}> {data["Batna"] ?? ""} onWilayaClick("Béjaïa", data["Béjaïa"])}> {data["Béjaïa"] ?? ""} onWilayaClick("Biskra", data["Biskra"])}> {data["Biskra"] ?? ""} onWilayaClick("Béchar", data["Béchar"])}> {data["Béchar"] ?? ""} onWilayaClick("Blida", data["Blida"])}> {data["Blida"] ?? ""} onWilayaClick("Bouira", data["Bouira"])}> {data["Bouira"] ?? ""} onWilayaClick("Tamanrasset", data["Tamanrasset"])}> {data["Tamanrasset"] ?? ""} onWilayaClick("Tébessa", data["Tébessa"])}> {data["Tébessa"] ?? ""} onWilayaClick("Tlemcen", data["Tlemcen"])}> {data["Tlemcen"] ?? ""} onWilayaClick("Tiaret", data["Tiaret"])}> {data["Tiaret"] ?? ""} onWilayaClick("Tizi Ouzou", data["Tizi Ouzou"])}> {data["Tizi Ouzou"] ?? ""} onWilayaClick("Alger", data["Alger"])}> {data["Alger"] ?? ""} onWilayaClick("Djelfa", data["Djelfa"])}> {data["Djelfa"] ?? ""} onWilayaClick("Jijel", data["Jijel"])}> {data["Jijel"] ?? ""} onWilayaClick("Sétif", data["Sétif"])}> {data["Sétif"] ?? ""} onWilayaClick("Saïda", data["Saïda"])}> {data["Saïda"] ?? ""} onWilayaClick("Skikda", data["Skikda"])}> {data["Skikda"] ?? ""} onWilayaClick("Sidi Bel Abbès", data["Sidi Bel Abbès"])} > {data["Sidi Bel Abbès"] ?? ""} onWilayaClick("Annaba", data["Annaba"])}> {data["Annaba"] ?? ""} onWilayaClick("Guelma", data["Guelma"])}> {data["Guelma"] ?? ""} onWilayaClick("Constantine", data["Constantine"])}> {data["Constantine"] ?? ""} onWilayaClick("Médéa", data["Médéa"])}> {data["Médéa"] ?? ""} onWilayaClick("Mostaganem", data["Mostaganem"])}> {data["Mostaganem"] ?? ""} onWilayaClick("M'Sila", data["M'Sila"])}> {data["M'Sila"] ?? ""} onWilayaClick("Mascara", data["Mascara"])}> {data["Mascara"] ?? ""} onWilayaClick("Ouargla", data["Ouargla"])}> {data["Ouargla"] ?? ""} onWilayaClick("Oran", data["Oran"])}> {data["Oran"] ?? ""} onWilayaClick("El Bayadh", data["El Bayadh"])}> {data["El Bayadh"] ?? ""} onWilayaClick("Illizi", data["Illizi"])}> {data["Illizi"] ?? ""} onWilayaClick("Bordj Bou Arreridj", data["Bordj Bou Arreridj"]) } > {data["Bordj Bou Arreridj"] ?? ""} onWilayaClick("Boumerdès", data["Boumerdès"])}> {data["Boumerdès"] ?? ""} onWilayaClick("El Tarf", data["El Tarf"])}> {data["El Tarf"] || 0} onWilayaClick("Tindouf", data["Tindouf"])}> {data["Tindouf"] ?? ""} onWilayaClick("Tissemsilt", data["Tissemsilt"])}> {data["Tissemsilt"] ?? ""} onWilayaClick("El Oued", data["El Oued"])}> {data["El Oued"] ?? ""} onWilayaClick("Khenchela", data["Khenchela"])}> {data["Khenchela"] ?? ""} onWilayaClick("Souk Ahras", data["Souk Ahras"])}> {data["Souk Ahras"] ?? ""} onWilayaClick("Tipaza", data["Tipaza"])}> {data["Tipaza"] ?? ""} onWilayaClick("Mila", data["Mila"])}> {data["Mila"] ?? ""} onWilayaClick("Aïn Defla", data["Aïn Defla"])}> {data["Aïn Defla"] ?? ""} onWilayaClick("Naâma", data["Naâma"])}> {data["Naâma"] ?? ""} onWilayaClick("Aïn Témouchent", data["Aïn Témouchent"])} > {data["Aïn Témouchent"] ?? ""} onWilayaClick("Ghardaïa", data["Ghardaïa"])}> {data["Ghardaïa"] || 0} onWilayaClick("Relizane", data["Relizane"])}> {data["Relizane"] ?? ""} onWilayaClick("El Meghaier", data["El Meghaier"])}> {data["El Meghaier"] || 0} onWilayaClick("El Menia", data["El Menia"])}> {data["El Menia"] ?? ""} onWilayaClick("Ouled Djellal", data["Ouled Djellal"])}> {data["Ouled Djellal"] ?? ""} onWilayaClick("Bordj Badji Mokhtar", data["Bordj Badji Mokhtar"]) } > {data["Bordj Badji Mokhtar"] ?? ""} onWilayaClick("Béni Abbès", data["Béni Abbès"])}> {data["Béni Abbès"] ?? ""} onWilayaClick("Timimoun", data["Timimoun"])}> {data["Timimoun"] ?? ""} onWilayaClick("Touggourt", data["Touggourt"])}> {data["Touggourt"] ?? ""} onWilayaClick("Djanet", data["Djanet"])}> {data["Djanet"] ?? ""} onWilayaClick("In Salah", data["In Salah"])}> {data["In Salah"] ?? ""} onWilayaClick("In Guezzam", data["In Guezzam"])}> {data["In Guezzam"] ?? ""} ); };