Implementasi Backend pada login, FAQ, Settings Intern, Projects Intern, Home Intern

src/Pages/internify/intern/ProjectsPage.tsx

@@ -1,7 +1,19 @@
 import ProjectCard from './components/ProjectsCard'
-import { mockProjects } from '../../../lib/mockData'
+import { useProjects } from '../../../hooks/useProjects';
 
 export default function ProjectsPage() {
+  const { projects, loading, error } = useProjects();
+
+  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">
@@ -10,8 +22,8 @@ export default function ProjectsPage() {
       </div>
 
       {/* Grid card */}
-      <div className="grid grid-cols-1 gap-6 md:gap-4 md:grid-cols-3 lg:grid-cols-4">
-        {mockProjects.map(project => (
+      <div className="grid grid-cols-1 gap-6 md:gap-3 md:grid-cols-4 lg:grid-cols-5">
+        {projects.map(project => (
           <ProjectCard key={project.id} {...project} />
         ))}
       </div>