From 8f87cdcaa7ded81d546a4bf47c6dba2706b1e5b6 Mon Sep 17 00:00:00 2001
From: Shanks0465 <umashanks99@gmail.com>
Date: Mon, 2 Sep 2024 20:29:47 +0530
Subject: [PATCH] People Button Stack Responsive

---
 frontend/components/People.tsx   |  1 +
 frontend/src/app/people/page.tsx | 22 ++++++++++++++++++----
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/frontend/components/People.tsx b/frontend/components/People.tsx
index 3222ebe..46d6dd5 100644
--- a/frontend/components/People.tsx
+++ b/frontend/components/People.tsx
@@ -95,6 +95,7 @@ export default function PeopleSection({
             {members.map((member) =>
               member.team === team ? (
                 <Card
+                  key={`${member.first_name}_${member.last_name}`}
                   first_name={member.first_name}
                   last_name={member.last_name}
                   role={member.role}
diff --git a/frontend/src/app/people/page.tsx b/frontend/src/app/people/page.tsx
index 866dce6..9c26ac0 100644
--- a/frontend/src/app/people/page.tsx
+++ b/frontend/src/app/people/page.tsx
@@ -2,7 +2,14 @@
 import { useEffect, useState } from "react";
 import axios from "axios";
 import PeopleSection from "../../../components/People";
-import { Stack, HStack, Button } from "@chakra-ui/react";
+import {
+  Stack,
+  HStack,
+  Button,
+  VStack,
+  useBreakpointValue,
+  Flex,
+} from "@chakra-ui/react";
 import { useQuery } from "react-query";
 import { API_URL } from "../config";
 
@@ -85,6 +92,7 @@ export default function People() {
   const [members, setMembers] = useState([]);
   const [section, setSection] = useState("fdr");
   const { isLoading, error, data } = useQuery("fetchMembers", fetchMembers);
+  const direction = useBreakpointValue({ base: "column", md: "row" });
 
   useEffect(() => {
     if (error || isLoading) {
@@ -95,8 +103,14 @@ export default function People() {
   }, [error, data, isLoading]);
 
   return (
-    <Stack alignItems={"center"}>
-      <HStack p={5}>
+    <Stack>
+      <Flex
+        p={5}
+        justifyContent={"center"}
+        gap={2}
+        direction={direction}
+        mt={10}
+      >
         <Button
           onClick={(event) => setSection("fdr")}
           value={"fdr"}
@@ -139,7 +153,7 @@ export default function People() {
         >
           Alumni
         </Button>
-      </HStack>
+      </Flex>
       {renderSection({ members, section })}
     </Stack>
   );