Feature/cgd 34

src/app/directory/components/TeamRow.module.css

@@ -0,0 +1,7 @@
+.table :where(td) {
+  @apply py-1;
+}
+
+.table :where(th) {
+  @apply pb-6;
+}

src/app/directory/components/TeamRow.tsx

@@ -0,0 +1,36 @@
+import { PencilSquareIcon } from "@heroicons/react/24/solid";
+import { TeamMember } from "./fixtures/MyTeam";
+import { Button } from "@/components";
+
+interface TeamRowProps {
+  teamMember: TeamMember;
+  currentUserId: string;
+}
+
+function TeamRow({ teamMember, currentUserId }: TeamRowProps) {
+  return (
+    <tr>
+      <td className="text-black">{teamMember.name}</td>
+      <td>{teamMember.discordId}</td>
+      <td>
+        <div className="flex items-center justify-between h-[35px] bg-white rounded-md pl-4">
+          {teamMember.averageHour === 0 ? "Add hours" : teamMember.averageHour}
+          {teamMember.id === currentUserId && (
+            <Button
+              title={"edit"}
+              customClassName="pl-2 pr-1 h-full rounded-l-none rounded-r-md p-0 min-h-0 text-sm font-semibold text-black bg-white border-transparent hover:bg-white hover:border-transparent"
+            >
+              <PencilSquareIcon className="w-4 h-4 text-black" />
+            </Button>
+          )}
+        </div>
+      </td>
+      <td>{teamMember.location}</td>
+      <td>{teamMember.timeZone}</td>
+      <td>{teamMember.email}</td>
+      <td>{teamMember.position}</td>
+    </tr>
+  );
+}
+
+export default TeamRow;

src/app/directory/components/TeamTable.tsx

@@ -0,0 +1,41 @@
+import styles from "./TeamRow.module.css";
+import { teamMembers } from "./fixtures/MyTeam";
+import { TeamRow } from ".";
+
+// Temp:
+const currentUserId = "1";
+
+function TeamTable() {
+  return (
+    <div className="overflow-x-auto">
+      <table
+        className={`table px-6 pb-10 border-separate border-none bg-primary-content pt-7 ${styles["table"]}`}
+      >
+        {/* head */}
+        <thead className="mb-10 text-xl font-semibold text-black">
+          <tr>
+            <th>Name</th>
+            <th>Discord ID</th>
+            <th>Average Hour/Sprint</th>
+            <th>Location</th>
+            <th>Time Zone</th>
+            <th>Email</th>
+            <th>Position</th>
+          </tr>
+        </thead>
+        <tbody className="text-base font-medium text-neutral">
+          {/* rows */}
+          {teamMembers.map((teamMember) => (
+            <TeamRow
+              key={teamMember.id}
+              teamMember={teamMember}
+              currentUserId={currentUserId}
+            />
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default TeamTable;

src/app/directory/components/fixtures/MyTeam.ts

@@ -0,0 +1,53 @@
+export interface TeamMember {
+  id: string;
+  name: string;
+  discordId: string;
+  averageHour: number;
+  location: string;
+  timeZone: string;
+  email: string;
+  position: string;
+}
+
+export const teamMembers: TeamMember[] = [
+  {
+    id: "1",
+    name: "Danney Trieu",
+    discordId: "danneytrieuwork#2558",
+    averageHour: 0,
+    location: "Denver, CO, USA",
+    timeZone: "MDT",
+    email: "[email protected]",
+    position: "Product Owner",
+  },
+  {
+    id: "2",
+    name: "Jane Morez",
+    discordId: "Jan_morez#2341",
+    averageHour: 0,
+    location: "Las Vegas, NY, USA",
+    timeZone: "PDT",
+    email: "[email protected]",
+    position: "Back-end Developer",
+  },
+  {
+    id: "3",
+    name: "Kayla Montre",
+    discordId: "KaylaMon#5678",
+    averageHour: 12,
+    location: "Las Vegas, NY, USA",
+    timeZone: "PDT",
+    email: "[email protected]",
+    position: "UX/UI Designer",
+  },
+  {
+    id: "4",
+    name: "Jackson Pez",
+    discordId: "jackson#2558",
+    averageHour: 10,
+    location: "Denver, CO, USA",
+    timeZone: "MDT",
+    email: "[email protected]",
+    position: "Front-end Developer",
+  },
+];

src/app/directory/components/index.ts

@@ -0,0 +1,2 @@
+export { default as TeamTable } from "./TeamTable";
+export { default as TeamRow } from "./TeamRow";

src/app/directory/index.ts

@@ -0,0 +1 @@
+export { default as DirectoryPage } from "./page";

src/app/directory/page.tsx

@@ -0,0 +1,7 @@
+import { TeamTable } from "./components";
+
+function DirectoryPage() {
+  return <TeamTable />;
+}
+
+export default DirectoryPage;

src/app/globals.css

@@ -5,6 +5,7 @@
 
 ::-webkit-scrollbar {
     width: 4px;
+    height: 6px
 }
 
 ::-webkit-scrollbar-track {

src/app/tech-stack/components/TechStackContainer.tsx

@@ -16,7 +16,7 @@ export default function TechStackContainer() {
     <div
       className={`card bg-primary-content p-10 ${styles["tech-container-width"]}`}
     >
-      <ul className="grid lg:grid-cols-2 xl:grid-cols-3 grid-cols-1 gap-y-20 justify-items-stretch">
+      <ul className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-y-20 justify-items-stretch">
         {Object.keys(techStack).map((cardType, index) => (
           <li
             key={cardType}