126 lines
4.1 KiB
TypeScript
126 lines
4.1 KiB
TypeScript
import { ProjectType } from "../../types";
|
|
|
|
type GalleryProjectsProps = {
|
|
projects: ProjectType[];
|
|
};
|
|
|
|
const ProjectsSection = ({ projects }: GalleryProjectsProps) => {
|
|
if (projects.length === 5) {
|
|
return <FiveProjects projects={projects} />;
|
|
}
|
|
if (projects.length === 4) {
|
|
return <FourProjects projects={projects} />;
|
|
}
|
|
|
|
return <ThreeProjects projects={projects} />;
|
|
};
|
|
|
|
const FiveProjects = ({ projects }: GalleryProjectsProps) => {
|
|
const rows = [
|
|
"row-span-2",
|
|
"row-span-1",
|
|
"row-span-3",
|
|
"row-span-2",
|
|
"row-span-1",
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className={`grid-cols-3 grid grid-rows-3 h-[590px] text-white gap-5 select-none`}
|
|
>
|
|
{projects.map((el, index) => {
|
|
const row = rows[index];
|
|
return (
|
|
<div
|
|
key={el.id}
|
|
className={`${row} relative h-full overflow-hidden after:absolute after:content-[''] after:z-10 after:w-full after:h-full after:top-0 after:left-0 after:bg-gradient-to-b after:from-[rgba(0,0,0,0)] after:to-[rgba(0,0,0,0.9)] cursor-pointer group`}
|
|
>
|
|
<img
|
|
src={el.imagePath}
|
|
alt=""
|
|
className="object-cover h-full group-hover:scale-105 transition-all duration-700 w-full"
|
|
/>
|
|
<div className="text-white absolute z-20 text-2xl bottom-0 left-0 p-[30px]">
|
|
{el.title !== "" && <h4>{el.title}</h4>}
|
|
{el.description !== "" && (
|
|
<p className="text-[16px] pt-4">{el.description}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
const FourProjects = ({ projects }: GalleryProjectsProps) => {
|
|
const rows = ["row-span-2", "row-span-1", "row-span-2", "row-span-1"];
|
|
return (
|
|
<>
|
|
<div
|
|
className={`grid-cols-2 grid grid-rows-3 h-[590px] text-white gap-5 select-none`}
|
|
>
|
|
{projects.map((el, index) => {
|
|
const row = rows[index];
|
|
return (
|
|
<div
|
|
key={el.id}
|
|
className={`${row} relative h-full overflow-hidden after:absolute after:content-[''] after:z-10 after:w-full after:h-full after:top-0 after:left-0 after:bg-gradient-to-b after:from-[rgba(0,0,0,0)] after:to-[rgba(0,0,0,0.9)] cursor-pointer group`}
|
|
>
|
|
<img
|
|
src={el.imagePath}
|
|
alt=""
|
|
className="object-cover h-full group-hover:scale-105 transition-all duration-700 w-full"
|
|
/>
|
|
<div className="text-white absolute z-20 text-2xl bottom-0 left-0 p-[30px]">
|
|
{el.title !== "" && <h4>{el.title}</h4>}
|
|
{el.description !== "" && (
|
|
<p className="text-[16px] pt-4">{el.description}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
const ThreeProjects = ({ projects }: GalleryProjectsProps) => {
|
|
const rows = ["row-span-2", "row-span-3", "row-span-1"];
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className={`grid-cols-2 grid grid-rows-3 h-[590px] text-white gap-5 select-none`}
|
|
>
|
|
{projects.map((el, index) => {
|
|
const row = rows[index];
|
|
return (
|
|
<div
|
|
key={el.id}
|
|
className={`${row} relative h-full overflow-hidden after:absolute after:content-[''] after:z-10 after:w-full after:h-full after:top-0 after:left-0 after:bg-gradient-to-b after:from-[rgba(0,0,0,0)] after:to-[rgba(0,0,0,0.9)] cursor-pointer group`}
|
|
>
|
|
<img
|
|
src={el.imagePath}
|
|
alt=""
|
|
className="object-cover h-full group-hover:scale-105 transition-all duration-700 w-full"
|
|
/>
|
|
<div className="text-white absolute z-20 text-2xl bottom-0 left-0 p-[30px]">
|
|
{el.title !== "" && <h4>{el.title}</h4>}
|
|
{el.description !== "" && (
|
|
<p className="text-[16px] pt-4">{el.description}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ProjectsSection;
|