Modals and API calls working for admin tab

src/components/tab/TabGroup.tsx

@@ -12,19 +12,22 @@ export interface Tab {
 }
 
 export interface TabGroupProps extends HTMLProps<HTMLDivElement>{
-	tabs: Tab[];
+	tabs?: Tab[];
 }
 
 
 export default function TabGroup(props: TabGroupProps){
 	const { tabs, className } = props;
+	if(!tabs){ throw new Error("Tabs must be present"); }
 	const [ activeTab, setActiveTab ] = useState<number>(tabs.map((tab, index) => tab.active ? index : undefined)[0] ?? 0);
 	//TODO: Possible to maintain state of past tabs if we "cache" them in a useState<JSX.Element>() on their first render
+	const divProps = {...props};
+	delete divProps.tabs;
 
 
 	return (
 		<div
-			{...props}
+			{...divProps}
 			className={clsx(
 				className,
 				"flex flex-col w-full"
@@ -50,7 +53,7 @@ export default function TabGroup(props: TabGroupProps){
 				</div>
 			</div>
 			<div
-				className="flex flex-col items-center justify-center"
+				className="flex flex-col items-center justify-center mt-8"
 			>
 				{
 					tabs.map((tab, index) => (
@@ -108,8 +111,8 @@ function TabContent({
 	return (
 		<div
 			className={clsx(
-				tab.headerClasses,
-				""
+				"w-full",
+				tab.contentClasses
 			)}
 		>
 			{tab.tabContent}