Refactor ProjectSelect and UnitTypeCard components; enhance styling and add new unit types to projects data

src/pages/UnitTypesPage.tsx

@@ -3,6 +3,7 @@ import ProjectSelect from "../components/ProjectSelect";
 import { projects } from "../data/projects";
 import clsx from "clsx";
 import UnitTypeCard from "../components/UnitTypeCard";
+import { AnimatePresence, motion } from "motion/react";
 
 function UnitTypesPage() {
   const [selectedProject, setSelectedProject] = useState(projects[0]);
@@ -15,8 +16,8 @@ function UnitTypesPage() {
         )}
       >
         <div className="2xl:space-y-[1.111vw] space-y-4">
-          <p className="2xl:text-[2.222vw] md:max-2xl:text-[32px] text-2xl font-semibold leading-[135%]">
-            Search
+          <p className="2xl:text-[2.222vw] md:max-2xl:text-[32px] text-2xl font-medium leading-[135%]">
+            Unit Types
           </p>
           <ProjectSelect
             projects={projects}
@@ -24,15 +25,24 @@ function UnitTypesPage() {
           />
         </div>
       </div>
-      <div className="m-4 md:max-2xl:m-6 2xl:m-[2.222vw] grid grid-cols-1 md:max-2xl:grid-cols-2 2xl:grid-cols-4 gap-4 2xl:gap-[1.111vw]">
-        {selectedProject.types?.map((type, index) => (
-          <UnitTypeCard
-            key={index}
-            project={selectedProject.title}
-            type={type}
-          />
-        ))}
-      </div>
+      <AnimatePresence mode="wait">
+        <motion.div
+          layout
+          key={selectedProject.title}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          className="m-4 md:max-2xl:m-6 2xl:m-[2.222vw] grid grid-cols-1 md:max-2xl:grid-cols-2 2xl:grid-cols-4 gap-4 2xl:gap-[1.111vw]"
+        >
+          {selectedProject.types?.map((type, index) => (
+            <UnitTypeCard
+              key={index}
+              project={selectedProject.title}
+              type={type}
+            />
+          ))}
+        </motion.div>
+      </AnimatePresence>
     </div>
   );
 }