Kemas M. Aryadary Rasyad
32 lines
967 B
TypeScript
32 lines
967 B
TypeScript
import ProjectCard from './components/ProjectsCard'
|
|
import { useMyProjects } from '../../../hooks/useProjects';
|
|
|
|
export default function ProjectsPage() {
|
|
const { projects, loading, error } = useMyProjects();
|
|
|
|
if (loading) return (
|
|
<div className="flex flex-col gap-3">
|
|
{[...Array(3)].map((_, i) => (
|
|
<div key={i} className="h-16 bg-gray-100 rounded-lg animate-pulse" />
|
|
))}
|
|
</div>
|
|
);
|
|
|
|
if (error) return <p className="text-danger text-md">{error}</p>;
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex flex-col gap-1 mb-6">
|
|
<span className="page-title">List Projects</span>
|
|
<h1 className="page-title-desc">View assigned projects and track their progress.</h1>
|
|
</div>
|
|
|
|
{/* Grid card */}
|
|
<div className="grid grid-cols-1 gap-4 md:gap-3 md:grid-cols-3 lg:grid-cols-5">
|
|
{projects.map(project => (
|
|
<ProjectCard key={project.id} {...project} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
} |