main page

src/pages/ProjectsPage.jsx

@@ -0,0 +1,39 @@
+import { useState } from 'react'
+import { FaFolder, FaPlus } from 'react-icons/fa6'
+
+export default function ProjectsPage() {
+  const [projects] = useState([])
+
+  return (
+    <div className="main-content">
+      <header className="text-center mb-2">
+        <h2>Projects</h2>
+      </header>
+
+      <div className="text-center mb-2">
+        <button className="btn btn-teal">
+          <FaPlus /> New Project
+        </button>
+      </div>
+
+      {projects.length === 0 ? (
+        <div className="text-center p-4">
+          <FaFolder size={64} className="text-grey" />
+          <p className="text-grey mt-2">No projects yet. Create your first project to get started.</p>
+        </div>
+      ) : (
+        <div className="projects-grid">
+          {projects.map(project => (
+            <div key={project.$id} className="project-card">
+              <h4>{project.name}</h4>
+              <p className="text-grey">{project.description}</p>
+              <div className="project-meta">
+                <span>{project.ticketCount || 0} tickets</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}