Responsive website using React, TailwindCSS.

Hello.

Congratulations on completing this difficult task. Cool start page. 🔥

There are a few items that need fixing:

• Not all countries open on the details page. The error "Uncaught TypeError: Cannot read properties of undefined (reading 'map')" is thrown.
• On the details page "cursor: pointer" anywhere on the page. In theory, it should be only at the buttons.
• When clicking on the "border countries" element, the country details page should open.
• Need to handle missing values. For example, the capital of Antarctica. Also for this reason, the error about which I wrote earlier falls. Not all countries have neighbors and it turns out that you are passing the undefind to the map method.
• A lot of code is duplicated, especially in classes.

try:

const className = "border-2 px-2 py-0 md:px-3 md:py-2 rounded-sm ${
darkMode 
? 'bg-darkBlue border-veryDarkBlue2 text-white' 
: 'bg-white border-darkGray text-darkGray'
}";

Note that I intentionally used double quotes (should be backticks) to correctly apply text formatting.

instead:

className={
darkMode
? "bg-darkBlue border-2 border-veryDarkBlue2 text-white px-2 py-0 md:px-3 md:py-2 rounded-sm"
: "bg-white border-2 border-darkGray text-darkGray px-2 py-0 md:px-3 md:py-2 rounded-sm "
}

Find the common and apply the ternary operator only to the different parameters. The same can be done inside the transfer of props.

• In general, for colors, I would recommend CSS variables. It also greatly reduces duplication.

I hope this will be helpful. Good luck!🤚