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,29 +1,17 @@
-import { PencilSquareIcon } from "@heroicons/react/24/solid";
-import { TeamMember } from ".";
-import { Button } from "@/components";
+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 className="text-black">{teamMember.name}</td>
+      <td>{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>
+        <EditCell teamMember={teamMember} currentUserId={currentUserId} />
       </td>
       <td>{teamMember.location}</td>
       <td>{teamMember.timeZone}</td>
@@ -32,5 +20,3 @@ function TeamRow({ teamMember, currentUserId }: TeamRowProps) {
     </tr>
   );
 }
-
-export default TeamRow;

src/app/directory/components/TeamTable.tsx

@@ -4,14 +4,14 @@ 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-primary-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-black">
+        <thead className="mb-10 text-xl font-semibold text-base-300">
           <tr>
             <th>Name</th>
             <th>Discord ID</th>
@@ -22,7 +22,7 @@ function TeamTable() {
             <th>Position</th>
           </tr>
         </thead>
-        <tbody className="text-base font-medium text-neutral">
+        <tbody className="text-base font-medium text-base-300">
           {/* rows */}
           {teamMembers.map((teamMember) => (
             <TeamRow
@@ -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 />
     </>
   );
 }

tailwind.config.js

@@ -40,9 +40,9 @@ module.exports = {
           primary: "#40936D",
           "primary-focus": "#82D9B1",
           "primary-content": "#7FB79D",
-          secondary: "#8FB4CC",
-          "secondary-focus": "#A6D1ED",
-          "secondary-content": "#697F8C",
+          secondary: "#44728B",
+          "secondary-focus": "#5E7387",
+          "secondary-content": "#36444D",
           accent: "#61CCA2",
           "accent-focus": "#6EE7B7",
           "accent-content": "#6B9984",