Feature/team directory responsive

src/app/directory/components/EditCell.tsx

@@ -0,0 +1,29 @@
+import { PencilSquareIcon } from "@heroicons/react/24/solid";
+import { TeamMember } from ".";
+import { Button } from "@/components";
+
+interface EditCellProps {
+  teamMember: TeamMember;
+  currentUserId: string;
+}
+
+export default function EditCell({ teamMember, currentUserId }: EditCellProps) {
+  return (
+    <div
+      className={`flex items-center justify-between h-[35px] rounded-md pl-4 ${
+        teamMember.id === currentUserId &&
+        "bg-base-100 hover:bg-secondary transition"
+      }`}
+    >
+      {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-medium text-base-300 bg-transparent border-transparent hover:bg-transparent hover:border-transparent"
+        >
+          <PencilSquareIcon className="w-4 h-4 text-base-300" />
+        </Button>
+      )}
+    </div>
+  );
+}

src/app/directory/components/TeamCard.tsx

@@ -0,0 +1,43 @@
+import { EditCell, TeamMember } from ".";
+
+interface TeamCardProps {
+  teamMember: TeamMember;
+  currentUserId: string;
+}
+
+export default function TeamCard({ teamMember, currentUserId }: TeamCardProps) {
+  return (
+    <div className="box-border flex flex-col items-center p-10 card bg-secondary-content">
+      <ul className="flex flex-col gap-6 min-w-[400px]">
+        <li className="grid grid-cols-2 gap-6">
+          <span className="font-semibold">Name</span>
+          <span>{teamMember.name}</span>
+        </li>
+        <li className="grid grid-cols-2 gap-6">
+          <span className="font-semibold">Discord ID</span>
+          <span>{teamMember.discordId}</span>
+        </li>
+        <li className="grid grid-cols-2 gap-6">
+          <span className="font-semibold">Average Hour/Sprint</span>
+          <EditCell teamMember={teamMember} currentUserId={currentUserId} />
+        </li>
+        <li className="grid grid-cols-2 gap-6">
+          <span className="font-semibold">Location</span>
+          <span>{teamMember.location}</span>
+        </li>
+        <li className="grid grid-cols-2 gap-6">
+          <span className="font-semibold">Timezone</span>
+          <span>{teamMember.timeZone}</span>
+        </li>
+        <li className="grid grid-cols-2 gap-6">
+          <span className="font-semibold">Email</span>
+          <span>{teamMember.email}</span>
+        </li>
+        <li className="grid grid-cols-2 gap-6">
+          <span className="font-semibold">Position</span>
+          <span>{teamMember.position}</span>
+        </li>
+      </ul>
+    </div>
+  );
+}

src/app/directory/components/TeamCardsContainer.tsx

@@ -0,0 +1,19 @@
+import { TeamCard, teamMembers } from ".";
+
+// Temp:
+const currentUserId = "1";
+
+export default function TeamCardsContainer() {
+  return (
+    <div className="flex flex-col min-[1920px]:hidden gap-y-10 w-full text-base-300 text-medium">
+      {/* cards */}
+      {teamMembers.map((teamMember) => (
+        <TeamCard
+          key={teamMember.id}
+          teamMember={teamMember}
+          currentUserId={currentUserId}
+        />
+      ))}
+    </div>
+  );
+}

src/app/directory/components/TeamDirectory.tsx

@@ -0,0 +1,12 @@
+import { TeamCardsContainer, TeamTable } from ".";
+
+export default function TeamDirectory() {
+  return (
+    <>
+      {/* For screens > 1920px */}
+      <TeamTable />
+      {/* For screens < 1920px */}
+      <TeamCardsContainer />
+    </>
+  );
+}

src/app/directory/components/TeamRow.tsx

@@ -1,28 +1,17 @@
-import { PencilSquareIcon } from "@heroicons/react/24/solid";
-import { TeamMember } from ".";
-
+import { EditCell, TeamMember } from ".";
 
 interface TeamRowProps {
   teamMember: TeamMember;
   currentUserId: string;
 }
 
-function TeamRow({ teamMember, currentUserId }: TeamRowProps) {
+export default function TeamRow({ teamMember, currentUserId }: TeamRowProps) {
   return (
     <tr>
       <td>{teamMember.name}</td>
       <td>{teamMember.discordId}</td>
       <td>
-        <div className="flex items-center justify-between h-[35px] bg-base-100 hover:bg-secondary hover:cursor-pointer rounded-md pl-4">
-          {teamMember.averageHour === 0 ? "Add hours" : teamMember.averageHour}
-          {teamMember.id === currentUserId && (
-            <div
-              className="flex items-center justify-between pr-4 text-sm font-semibold "
-            >
-              <PencilSquareIcon className="w-4 h-4 text-base-300 bg-transparent" />
-            </div>
-          )}
-        </div>
+        <EditCell teamMember={teamMember} currentUserId={currentUserId} />
       </td>
       <td>{teamMember.location}</td>
       <td>{teamMember.timeZone}</td>
@@ -31,5 +20,3 @@ function TeamRow({ teamMember, currentUserId }: TeamRowProps) {
     </tr>
   );
 }
-
-export default TeamRow;

src/app/directory/components/TeamTable.tsx

@@ -4,11 +4,11 @@ import { TeamRow, teamMembers } from ".";
 // Temp:
 const currentUserId = "1";
 
-function TeamTable() {
+export default function TeamTable() {
   return (
-    <div className="w-full">
+    <div className="hidden w-full min-[1920px]:block">
       <table
-        className={`table px-6 pb-10 border-separate border-none bg-secondary-content pt-7 ${styles["table"]}`}
+        className={`table px-6 pb-10 border-separate border-none bg-secondary-content text-base-300 pt-7 ${styles["table"]}`}
       >
         {/* head */}
         <thead className="mb-10 text-xl font-semibold text-base-300">
@@ -36,5 +36,3 @@ function TeamTable() {
     </div>
   );
 }
-
-export default TeamTable;

src/app/directory/components/index.ts

@@ -1,3 +1,7 @@
 export { default as TeamTable } from "./TeamTable";
 export { default as TeamRow } from "./TeamRow";
+export { default as TeamCard } from "./TeamCard";
+export { default as TeamCardsContainer } from "./TeamCardsContainer";
+export { default as EditCell } from "./EditCell";
+export { default as TeamDirectory } from "./TeamDirectory";
 export * from "./fixtures/MyTeam";

src/app/directory/page.tsx

@@ -1,4 +1,4 @@
-import { TeamTable } from ".";
+import { TeamDirectory } from ".";
 import { Banner } from "@/components";
 
 function DirectoryPage() {
@@ -10,7 +10,7 @@ function DirectoryPage() {
         title="Directory"
         description="Behold, your mighty band of teammates! If you want them to plan with precision and prowess, make sure your deets are up to date, or else prepare for some serious spreadsheet confusion!"
       />
-      <TeamTable />;
+      <TeamDirectory />
     </>
   );
 }