Reupload

web-app/src/components/Tabs.tsx

@@ -0,0 +1,37 @@
+import {useState} from "react"
+
+interface TabsProps {
+	tabs: {
+		name: string,
+		renderer: JSX.Element
+	}[]
+}
+
+export default function Tabs({tabs}: TabsProps) {
+
+	const [selectedTab, SetSelectedTab] = useState(0)
+
+	const selectedButtonClassName = "border-b border-b-app-primary text-awary-primary box-border p-4 cursor-pointer"
+	const unselectedButtonClassName = "border-b border-neutral-600 box-border p-4 cursor-pointer"
+
+	const bar = tabs.map((tab, index) => 
+		<div
+			key={index} 
+			className={index === selectedTab ? selectedButtonClassName : unselectedButtonClassName}
+			onClick={() => {SetSelectedTab(index)}}
+		>
+			{tab.name}
+		</div>
+	)
+
+	return (
+		<>
+			<div className="flex flex-row border-b border-b-neutral-500">
+				{bar}
+			</div>
+			<div>
+				{tabs[selectedTab].renderer}
+			</div>
+		</>
+	)
+}