index.tsx•822 B
"use client";
import { Project } from "@/types/project";
import ProjectItem from "./item";
export default ({
projects,
loading,
}: {
projects: Project[];
loading?: boolean;
}) => {
return (
<section className="relative">
<div className="mx-auto max-w-7xl px-5 py-4 md:px-10 md:py-4 lg:py-4">
{!loading ? (
<div className="mb-8 gap-5 py-4 [column-count:1] md:mb-12 md:[column-count:2] lg:mb-16 lg:[column-count:3]">
{projects.map((item: Project, idx: number) => {
return (
<div key={idx}>
<ProjectItem project={item} />
</div>
);
})}
</div>
) : (
<div className="mx-auto text-center">Loading data...</div>
)}
</div>
</section>
);
};