51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import { useState } from "react";
|
|
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]);
|
|
|
|
return (
|
|
<div className="">
|
|
<div
|
|
className={clsx(
|
|
"2xl:p-[2.222vw] md:max-2xl:p-6 p-4 bg-white 2xl:rounded-b-[1.667vw] rounded-b-3xl 2xl:space-y-[2.222vw] md:max-2xl:space-y-8 space-y-4"
|
|
)}
|
|
>
|
|
<div className="2xl:space-y-[1.111vw] space-y-4">
|
|
<p className="2xl:text-[2.222vw] md:max-2xl:text-[32px] text-2xl font-medium leading-[135%]">
|
|
Unit Types
|
|
</p>
|
|
<ProjectSelect
|
|
projects={projects}
|
|
onSelect={(project) => setSelectedProject(project)}
|
|
/>
|
|
</div>
|
|
</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>
|
|
);
|
|
}
|
|
|
|
export default UnitTypesPage;
|