so I have mycomponents folder that contain folders for each section in the webpage, for example, inside this folder there is projects folder that has 2 components file, the first file does map several projects extracted from api into map() function and return jsx, inside the map, there is a Modal , the 2nd file is called projectsModal.tsx which basically implement the modal of each project.

Now, the 2nd folder is called sections this one would wrap whatever implemented in one of the folders that are inside mycomponents with a parent div, for example sections folder has file for every section in the webpage, there is projects.tsx which basically wrap the mapping in mycomponents/projects file in a parent div like this:

<div id='parentDiv'>
<ProjectMap/>

in section folder there is main.tsx that group all the sections file together, and then the Main component is rendered in the main page.tsx file.


Question is: is this the correct approach?

Another question: I have similar styling pattern (I use tailwind css) for some divs in separate file, I was wondering if it is a good practice to have a UI folder that has styled components imported around the project, for example, this motion based div is being written in many components:

<motion.div initial={{opacity:0,width:0}} whileInView={{opacity:1, width:100}}/>

should i create a file component for that in UI folder and import it in the suitable sections?