🌍 Leaflet Country Maps

Select a country and customize its colors

\n \n {projectInfo && (\n \n View Source\n \n )}\n

\n\n

\n \n Country\n \n \n {COUNTRIES.map((country) => (\n \n ))}\n \n

\n\n

\n \n Fill Color\n \n

\n setFillColor(e.target.value)}\n className=\"h-10 w-16 border border-gray-300 rounded cursor-pointer\"\n />\n setFillColor(e.target.value)}\n className=\"flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500\"\n placeholder=\"#3388ff\"\n />\n

\n\n

\n \n Border Color\n \n

\n setBorderColor(e.target.value)}\n className=\"h-10 w-16 border border-gray-300 rounded cursor-pointer\"\n />\n setBorderColor(e.target.value)}\n className=\"flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500\"\n placeholder=\"#ffffff\"\n />\n

\n\n

\n \n Border Width: {borderWidth}px\n \n setBorderWidth(Number(e.target.value))}\n className=\"w-full\"\n />\n

\n\n

\n {loading && (\n

\n Loading {selectedCountry.name}...\n

\n )}\n {error && (\n

\n {error}\n

\n )}\n

\n );\n}\n","deleted","label",[173,174,155],"frontend","components","permalink","https://www.val.town/x/jpmarindiaz/leaflet-maps/code/frontend/components/App.tsx","extension","actionData","errors"]