Quick file structure fix

src/components/Queue/QueueContainer.css

@@ -14,66 +14,6 @@ body {
 	align-items: center;
 }
 
-.statusMenu {
-	display: flex;
-	flex-direction: row;
-	list-style: none;
-	align-items: center;
-}
-
-.statusMenu li {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-}
-
-.statusMenu button {
-	outline: none;
-	border: none;
-	background-color: var(--default-background);
-	font-size: 1em;
-}
-
-
-.statusMenu li:not(:first-child) button{
-	border-left: 1px solid black;
-}
-
-.statusMenu li:after {
-	content: "";
-	display: block;
-	color: var(--default-background);
-	border-bottom: thick solid;
-	width: 90%;
-}
-
-.statusMenu .selectedTab:after {
-	content: "";
-	display: block;
-	color: var(--light-blue);
-	border-bottom: thick solid;
-	animation-duration: .3s;
-	animation-name: slidein;
-}
-
-
-@keyframes slidein {
-	from {
-		width: 0%; 
-	}
-
-	to {
-		width: 90%;
-	}
-
-}
-
-
-.statusMenu > button {
-	border: none;
-	margin: 0;
-}
-
 .search-container input {
 	padding: 2px;
 	border: none;

src/components/Queue/QueueContainer.jsx

@@ -3,6 +3,8 @@ import dummyData from '../dummyData';
 import PrintCardContainer from './components/PrintCardContainer';
 import './QueueContainer.css';
 import SearchBar from './components/SearchBar';
+import MenuBar from '../globalStyles/MenuBar';
+import { MenuTabs } from '../globalStyles/MenuTabs';
 
 const QueueContainer = () => {
 	const [data] = useState(dummyData);
@@ -49,20 +51,14 @@ const QueueContainer = () => {
 		<PrintCardContainer data={el} key={i} />
 	));
 
+	const setStatus = (view) => {
+		setStatusView(view);
+	}
+
 	return (
 		<div>
 			<div className='queueFilterInfo'>
-				<ul className='statusMenu'>
-					<li className={statusView === 'QUEUEING' ? 'selectedTab' : ''}>
-						<button onClick={() => setStatusView('QUEUEING')}>Queue</button>
-					</li>
-					<li className={statusView === 'DONE' ? 'selectedTab' : ''}>
-						<button onClick={() => setStatusView('DONE')}>Recently Completed</button>
-					</li>
-					<li className={statusView === 'PRINTING' ? 'selectedTab' : ''}>
-						<button onClick={() => setStatusView('PRINTING')}>In Progress</button>
-					</li>
-				</ul>
+				<MenuBar selectedTab={statusView} tabOptions={MenuTabs.QueueTabs} setView={setStatus} />
 				<SearchBar filterByTerm={filterByTerm} />
 			</div>
 			<ul className='queueBanner'>

src/components/globalStyles/MenuBar.css

@@ -0,0 +1,56 @@
+.statusMenu {
+	display: flex;
+	flex-direction: row;
+	list-style: none;
+	align-items: center;
+}
+
+.statusMenu li {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.statusMenu button {
+	outline: none;
+	border: none;
+	background-color: var(--default-background);
+	font-size: 1em;
+}
+
+@keyframes slidein {
+	from {
+		width: 0%; 
+	}
+
+	to {
+		width: 90%;
+	}
+
+}
+
+.statusMenu > button {
+	border: none;
+	margin: 0;
+}
+
+.statusMenu li:not(:first-child) button{
+	border-left: 1px solid black;
+}
+
+.statusMenu li:after {
+	content: "";
+	display: block;
+	color: var(--default-background);
+	border-bottom: thick solid;
+	width: 90%;
+}
+
+.statusMenu .selectedTab:after {
+	content: "";
+	display: block;
+	color: var(--light-blue);
+	border-bottom: thick solid;
+	animation-duration: .3s;
+	animation-name: slidein;
+}

src/components/globalStyles/MenuBar.jsx

@@ -0,0 +1,22 @@
+import React, { useState } from 'react';
+import styles from './MenuBar.css';
+
+const MenuBar = ({ selectedTab, tabOptions, setView }) => {
+
+    const tabDisplay = tabOptions.map((tab, index) => {
+        return (<li className={tab.name === selectedTab ? 'selectedTab' : ''}>
+            <button onClick={() => setView(tab.name)}>{tab.label}</button>
+        </li>)
+    });
+	return (
+        <div>
+            <ul className='statusMenu'>
+                {tabDisplay}
+            </ul>
+        </div>
+	);
+};
+
+export default MenuBar;
+
+

src/components/globalStyles/MenuTabs.js

@@ -0,0 +1,30 @@
+class MenuTabs {
+    QueueTabs = [
+        {
+            name: 'QUEUEING',
+            label: 'Queue'
+        },
+        {
+            name: 'PRINTING',
+            label: 'In Progress'
+        },		
+        {
+            name: 'DONE',
+            label: 'Recently Completed'
+        },
+    ];
+    ManageAccountTabs = [
+        {
+            name: 'components',
+            label: 'Components'
+        },
+        {
+            name: 'users',
+            label: 'User Profiles'
+        }
+    ]
+}
+
+const instance = new MenuTabs();
+export { instance as MenuTabs };
+export default MenuTabs;