🐛 Fixing selected tab

src/front/Components/Elements/Tabs/HorizontalTab/index.tsx

@@ -2,13 +2,14 @@ import { useCallback } from "react";
 import classes from "./classes.module.scss";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import useHoverable from "@Front/Hooks/useHoverable";
+import { ITabValue } from "..";
 export type ITab = {
 	label: React.ReactNode;
 };
 
 export type IProps<T> = {
-	onSelect: (value: T) => void;
-	value: T;
+	onSelect: (value: ITabValue<T>) => void;
+	value: ITabValue<T>;
 	isSelected: boolean;
 } & ITab;
 

src/front/Components/Elements/Tabs/VerticalTabs/index.tsx

@@ -1,13 +1,14 @@
 import { useCallback } from "react";
 import classes from "./classes.module.scss";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
+import { ITabValue } from "..";
 export type ITab = {
 	label: React.ReactNode;
 };
 
 export type IProps<T> = {
-	onSelect: (value: T) => void;
-	value: T;
+	onSelect: (value: ITabValue<T>) => void;
+	value: ITabValue<T>;
 	isSelected: boolean;
 } & ITab;
 

src/front/Components/Elements/Tabs/index.tsx

@@ -6,9 +6,13 @@ import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Ty
 import { useDebounce, useWindowSize } from "@uidotdev/usehooks";
 import useOpenable from "@Front/Hooks/useOpenable";
 
+export type ITabValue<T> = T & {
+	id: unknown;
+};
+
 type ITabInternal<T> = ITab & {
 	key?: string;
-	value: T;
+	value: ITabValue<T>;
 };
 
 type IProps<T> = {
@@ -22,7 +26,7 @@ export default function Tabs<T>(props: IProps<T>) {
 	const [visibleElements, setVisibleElements] = useState<ITabInternal<T>[]>([]);
 	const [overflowedElements, setOverflowedElements] = useState<ITabInternal<T>[]>([]);
 
-	const [selectedTab, setSelectedTab] = useState<T>(props.tabs[0]!.value);
+	const [selectedTab, setSelectedTab] = useState<ITabValue<T>>(props.tabs[0]!.value);
 
 	const { close, isOpen, toggle } = useOpenable();
 
@@ -55,7 +59,7 @@ export default function Tabs<T>(props: IProps<T>) {
 	}, [calculateVisibleElements, windowSizeDebounced]);
 
 	const handleSelect = useCallback(
-		(value: T) => {
+		(value: ITabValue<T>) => {
 			setSelectedTab(value);
 			onSelect(value);
 			close();
@@ -72,7 +76,7 @@ export default function Tabs<T>(props: IProps<T>) {
 						key={element.key ?? index}
 						value={element.value}
 						onSelect={handleSelect}
-						isSelected={selectedTab === element.value}
+						isSelected={element.value.id === selectedTab.id}
 					/>
 				))}
 			</div>
@@ -84,7 +88,7 @@ export default function Tabs<T>(props: IProps<T>) {
 							key={element.key ?? index}
 							value={element.value}
 							onSelect={handleSelect}
-							isSelected={selectedTab === element.value}
+							isSelected={element.value.id === selectedTab.id}
 						/>
 					))}
 				</div>

src/front/Components/Layouts/DesignSystem/index.tsx

@@ -8,7 +8,7 @@ import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
 
 import classes from "./classes.module.scss";
 import Tabs from "@Front/Components/Elements/Tabs";
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 
 export default function DesignSystem() {
 	const userDb = [
@@ -34,13 +34,17 @@ export default function DesignSystem() {
 		},
 	];
 
+	const [selectedTab, setSelectedTab] = useState<(typeof userDb)[number]>(userDb[0]!);
+
 	const onSelect = useCallback((value: (typeof userDb)[number]) => {
-		console.log(value);
+		setSelectedTab(value);
 	}, []);
 
 	return (
 		<DefaultTemplate title={"DesignSystem"}>
+			<Typography typo={ETypo.DISPLAY_LARGE}>DesignSystem</Typography>
 			<Newsletter isOpen />
+			<Typography typo={ETypo.TEXT_LG_BOLD}>Tabs</Typography>
 			<Tabs<(typeof userDb)[number]>
 				tabs={userDb.map((user) => ({
 					label: user.username,
@@ -49,8 +53,12 @@ export default function DesignSystem() {
 				}))}
 				onSelect={onSelect}
 			/>
+			<div className={classes["tab-content"]}>
+				<Typography typo={ETypo.TEXT_MD_REGULAR}>
+					{selectedTab.id} - {selectedTab.username}
+				</Typography>
+			</div>
 			<div className={classes["root"]}>
-				<Typography typo={ETypo.DISPLAY_LARGE}>DesignSystem</Typography>
 				<div className={classes["components"]}>
 					<Typography typo={ETypo.TEXT_LG_BOLD}>Circle Progress</Typography>
 					<div className={classes["rows"]}>