feat: create TeamDirectoryComponent

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/index.ts

@@ -3,4 +3,5 @@ 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, TeamCardsContainer } from ".";
+import { TeamDirectory } from ".";
 import { Banner } from "@/components";
 
 function DirectoryPage() {
@@ -10,10 +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!"
       />
-      {/* For screens > 1920px */}
-      <TeamTable />
-      {/* For screens < 1920px */}
-      <TeamCardsContainer />
+      <TeamDirectory />
     </>
   );
 }