VF-166 Move Tab-component to component folder

vektorprogrammet · Dec 28, 2024 · a2d461e · a2d461e
1 parent cf34495
commit a2d461e
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 105 deletions.
diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
@@ -0,0 +1,111 @@
+import { useEffect, useState } from "react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@radix-ui/react-dropdown-menu";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAngleDown } from "@fortawesome/free-solid-svg-icons";
+
+interface TabProps {
+  divisions: DivisionList[];
+  tabstate: number;
+  setOpenTab: (number: number) => void;
+};
+
+interface DivisionList {
+  name: string;
+  number: number;
+}
+
+const Tabs = ({divisions, tabstate, setOpenTab}: TabProps): JSX.Element => {
+  const [isSmallScreen, setIsSmallScreen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    const checkScreenSize = () => {
+      const isSmall = window.matchMedia("(max-width: 860px)").matches;
+      setIsSmallScreen(isSmall);
+    }
+
+    checkScreenSize();
+    window.addEventListener("resize", checkScreenSize);
+
+    return () => {
+      window.removeEventListener("resize", checkScreenSize);
+    }
+
+
+  }, [])
+
+  if (isSmallScreen) {
+    return (
+      <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
+        <DropdownMenuTrigger asChild className="flex flex-row mb-4 relative">
+          <button
+            className="bg-vektor-darkblue text-white w-36 h-8 items-center cursor-default rounded-md flex justify-between px-2"
+            onClick={() => setIsOpen(!isOpen)}
+          >
+            <div className="flex items-center justify-between w-full">
+              {divisions.find((data) => tabstate === data.number)?.name || "Select Tab"}
+              <FontAwesomeIcon icon={faAngleDown} className="ml-2 text-gray-600" />
+            </div>
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="bg-white w-full rounded-md m-1 w-36 shadow-sm">
+          {divisions.map((data) => {
+            const chosenStyle =
+              tabstate === data.number
+                ? "font-semibold text-vektor-darkblue"
+                : "hover:text-vektor-light-blue";
+            return (
+              <div key={data.number}>
+                <DropdownMenuLabel
+                  className={`cursor-pointer rouned-md px-2 py-1 w-full ${chosenStyle}`}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    setOpenTab(data.number);
+                    setIsOpen(false);
+                  }}
+                >
+                  {data.name}
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator />
+              </div>
+            );
+          })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  }
+
+
+  return (
+    <div className="flex flex-row md:flex-col">
+        {divisions.map((data) => {
+          const chosenStyle =
+          tabstate === data.number
+          ? "bg-vektor-darkblue text-white hover:bg-vektor-darkblue"
+          : "bg-transparent hover:bg-vektor-light-blue dark:text-white";
+          return (
+            <div key={data.name}>
+              <button
+                type="button"
+                className={`btn rounded-full btn-sm w-32 border-none shadow-none my-1 ${chosenStyle}`}
+                onClick={(e) => {
+                  e.preventDefault();
+                  setOpenTab(data.number);
+                }}
+              >
+                {data.name}
+              </button>
+            </div>
+          );
+        })}
+      </div>
+  )
+}
+
+export default Tabs;
diff --git a/src/pages/public/Kontakt/components/KontaktOss.tsx b/src/pages/public/Kontakt/components/KontaktOss.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import Division from "./Division.js";
-import { Tabs } from "../../Team/components/TeamTabs.js";
+import Tabs from "@/components/Tabs.js";
 
 interface KontaktTabProps {
   divisions: DivisionList[];

diff --git a/src/pages/public/Team/components/TeamTabs.tsx b/src/pages/public/Team/components/TeamTabs.tsx
@@ -1,20 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import Division from "./Division";
-import { DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@radix-ui/react-dropdown-menu";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faAngleDown } from "@fortawesome/free-solid-svg-icons";
-
-interface TabProps {
-  divisions: DivisionList[];
-  tabstate: number;
-  setOpenTab: (number: number) => void;
-};
+import Tabs from "@/components/Tabs";
 
 interface TeamTabProps {
   divisions: DivisionList[];
@@ -262,96 +249,6 @@ const HovedstyretTab = ({ open }: { open: boolean }): JSX.Element => {
 };
 
 
-
-
-export const Tabs = ({divisions, tabstate, setOpenTab}: TabProps): JSX.Element => {
-  const [isSmallScreen, setIsSmallScreen] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
-
-  useEffect(() => {
-    const checkScreenSize = () => {
-      const isSmall = window.matchMedia("(max-width: 860px)").matches;
-      setIsSmallScreen(isSmall);
-    }
-
-    checkScreenSize();
-    window.addEventListener("resize", checkScreenSize);
-
-    return () => {
-      window.removeEventListener("resize", checkScreenSize);
-    }
-
-
-  }, [])
-
-  if (isSmallScreen) {
-    return (
-      <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
-        <DropdownMenuTrigger asChild className="flex flex-row mb-4 relative">
-          <button
-            className="bg-vektor-darkblue text-white w-36 h-8 items-center cursor-default rounded-md flex justify-between px-2"
-            onClick={() => setIsOpen(!isOpen)}
-          >
-            <div className="flex items-center justify-between w-full">
-              {divisions.find((data) => tabstate === data.number)?.name || "Select Tab"}
-              <FontAwesomeIcon icon={faAngleDown} className="ml-2 text-gray-600" />
-            </div>
-          </button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="bg-white w-full rounded-md m-1 w-36 shadow-sm">
-          {divisions.map((data) => {
-            const chosenStyle =
-              tabstate === data.number
-                ? "font-semibold text-vektor-darkblue"
-                : "hover:text-vektor-light-blue";
-            return (
-              <div key={data.number}>
-                <DropdownMenuLabel
-                  className={`cursor-pointer rouned-md px-2 py-1 w-full ${chosenStyle}`}
-                  onClick={(e) => {
-                    e.preventDefault();
-                    setOpenTab(data.number);
-                    setIsOpen(false);
-                  }}
-                >
-                  {data.name}
-                </DropdownMenuLabel>
-                <DropdownMenuSeparator />
-              </div>
-            );
-          })}
-        </DropdownMenuContent>
-      </DropdownMenu>
-    );
-  }
-
-
-  return (
-    <div className="flex flex-row md:flex-col">
-        {divisions.map((data) => {
-          const chosenStyle =
-          tabstate === data.number
-          ? "bg-vektor-darkblue text-white hover:bg-vektor-darkblue"
-          : "bg-transparent hover:bg-vektor-light-blue dark:text-white";
-          return (
-            <div key={data.name}>
-              <button
-                type="button"
-                className={`btn rounded-full btn-sm w-32 border-none shadow-none my-1 ${chosenStyle}`}
-                onClick={(e) => {
-                  e.preventDefault();
-                  setOpenTab(data.number);
-                }}
-              >
-                {data.name}
-              </button>
-            </div>
-          );
-        })}
-      </div>
-  )
-}
-
 const TeamTabs = ({ divisions }: TeamTabProps): JSX.Element => { 
   const initialTabState = () => {
     const storedTab = sessionStorage.getItem("teamTab");