From c38ab100db0b49ead38bb576ad941ac28ce28b7d Mon Sep 17 00:00:00 2001
From: Tze Zhe Brandon Lim <brandonlim8890@gmail.com>
Date: Wed, 10 Apr 2024 17:19:44 -0400
Subject: [PATCH] Abstract into another function

---
 .../components/Sidebar/DropdownWarning.tsx    | 40 +++++++++++++++++
 .../frontend/components/Sidebar/Sidebar.tsx   | 45 ++-----------------
 2 files changed, 43 insertions(+), 42 deletions(-)
 create mode 100644 packages/frontend/components/Sidebar/DropdownWarning.tsx

diff --git a/packages/frontend/components/Sidebar/DropdownWarning.tsx b/packages/frontend/components/Sidebar/DropdownWarning.tsx
new file mode 100644
index 000000000..7daab0416
--- /dev/null
+++ b/packages/frontend/components/Sidebar/DropdownWarning.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import { InfoIcon } from "@chakra-ui/icons";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionIcon,
+  AccordionPanel,
+  Text,
+} from "@chakra-ui/react";
+
+const DropdownWarning = () => {
+  return (
+    <Accordion pb="sm" allowToggle>
+      <AccordionItem
+        borderRadius="lg"
+        backgroundColor="informationBadge.back"
+        border="1px #5F6CF6 solid"
+      >
+        <AccordionButton>
+          <InfoIcon mr="xs" color="informationBadge.main" />
+          <Text fontWeight="semibold" textAlign="left" fontSize="md" flex="1">
+            Heads up!
+          </Text>
+          <AccordionIcon color="informationBadge.main" />
+        </AccordionButton>
+        <AccordionPanel>
+          <Text fontSize="sm">
+            This is our representation of the degree audit. It may not be fully
+            accurate. Kindly always reference the actual degree audit for
+            validating your graduation eligibility. We are actively working to
+            improve this.
+          </Text>
+        </AccordionPanel>
+      </AccordionItem>
+    </Accordion>
+  );
+};
+
+export default DropdownWarning;
diff --git a/packages/frontend/components/Sidebar/Sidebar.tsx b/packages/frontend/components/Sidebar/Sidebar.tsx
index 3c8c85488..f11e5fedc 100644
--- a/packages/frontend/components/Sidebar/Sidebar.tsx
+++ b/packages/frontend/components/Sidebar/Sidebar.tsx
@@ -1,17 +1,4 @@
-import {
-  Accordion,
-  AccordionButton,
-  AccordionIcon,
-  AccordionItem,
-  AccordionPanel,
-  Badge,
-  Box,
-  Flex,
-  Heading,
-  Link,
-  Stack,
-  Text,
-} from "@chakra-ui/react";
+import { Badge, Box, Flex, Heading, Link, Stack, Text } from "@chakra-ui/react";
 import {
   MajorValidationError,
   MajorValidationResult,
@@ -43,6 +30,7 @@ import { useFetchCourses, useMajor } from "../../hooks";
 import { HelperToolTip } from "../Help";
 import NUPathSection from "./NUPathSection";
 import { InfoIcon } from "@chakra-ui/icons";
+import DropdownWarning from "./DropdownWarning";
 
 export enum SidebarValidationStatus {
   Loading = "Loading",
@@ -360,34 +348,7 @@ const SidebarContainer: React.FC<PropsWithChildren<SidebarContainerProps>> = ({
             </Text>
           )}
         </Box>
-        <Accordion pb="sm" allowToggle>
-          <AccordionItem
-            borderRadius="lg"
-            backgroundColor="informationBadge.back"
-            border="1px #5F6CF6 solid"
-          >
-            <AccordionButton>
-              <InfoIcon mr="xs" color="informationBadge.main" />
-              <Text
-                fontWeight="semibold"
-                textAlign="left"
-                fontSize="md"
-                flex="1"
-              >
-                Heads up!
-              </Text>
-              <AccordionIcon color="informationBadge.main" />
-            </AccordionButton>
-            <AccordionPanel>
-              <Text fontSize="sm">
-                This is our representation of the degree audit. It may not be
-                fully accurate. Kindly always reference the actual degree audit
-                for validating your graduation eligibility. We are actively
-                working to improve this.
-              </Text>
-            </AccordionPanel>
-          </AccordionItem>
-        </Accordion>
+        <DropdownWarning />
         {creditsTaken !== undefined && (
           <Flex mb="sm" alignItems="baseline" columnGap="xs">
             <Text