Tutorial Working

src/components/tab/TabGroup.tsx

@@ -3,6 +3,7 @@ import { HTMLProps, useState } from "react";
 
 
 export interface Tab {
+	tabId?: string;
 	tabHeader: React.ReactNode;
 	headerClasses?: string;
 	tabContent: React.ReactNode;
@@ -39,6 +40,7 @@ export default function TabGroup(props: TabGroupProps){
 				{
 					tabs.map((tab, index) => (
 						<TabHeader
+							id={tab.tabId}
 							key={index}
 							tab={tab}
 							active={activeTab === index}
@@ -71,16 +73,19 @@ export default function TabGroup(props: TabGroupProps){
 
 
 function TabHeader({
+	id,
 	tab,
 	onClick,
 	active
 }:{
+	id?: string;
 	tab: Tab;
 	onClick: () => void;
 	active: boolean;
 }){
 	return (
 		<div
+			id={id}
 			className={clsx(
 				tab.headerClasses,
 				"px-4 py-2 rounded-t-lg cursor-pointer whitespace-nowrap",