I created this tabs component it works properly in desktop but I want hide this in mobile and show .tabsMobile it is a dropdown. but here dropdown items not clickable. they are not changing when click. what is the problem here. I think onChange event in the Select component is not working. I need to pass the relevant value and change dropdown labal when clicked. then it need to load respective content
'use client';
interface IElementTabs {
}
const ElementTabs:FC<IElementTabs> = ({}) => {
const [toggleState, setToggleState] = useState(1)
const toggleTab = (index:number) => {
setToggleState(index)
}
const handleDropdownChange = (value: string | null) => {
console.log(value);
if (value !== null) {
const selectedIndex = parseInt(value);
setToggleState(selectedIndex);
}
};
const dropdownData = [
{ value: "1", label: "My details" },
{ value: "2", label: "Purchase history" },
{ value: "3", label: "Subscriptions" },
];
return <ElementHolder
classes={`element element--pt-default element--pb-default tabs`}>
<Container>
<div className={styles.tabs}>
<div className={`${styles.tab} ${toggleState===1 ? styles.tabActive: ''}`}
onClick={() => toggleTab(1)}>
<div className={styles.icon}>
<Profile />
</div>
<p>My details</p>
</div>
<div className={`${styles.tab} ${toggleState===2 ? styles.tabActive: ''}`} onClick={() => toggleTab(2)}>
<div className={styles.icon}>
<History />
</div>
<p>Purchase history</p>
</div>
<div className={`${styles.tab} ${toggleState===3 ? styles.tabActive: ''}`} onClick={() => toggleTab(3)}>
<div className={styles.icon}>
<Subscribe />
</div>
<p>Subscriptions</p>
</div>
</div>
<div className={styles.tabsMobile}>
<Select
value={toggleState.toString()}
onChange={(value) => handleDropdownChange(value)}
data={dropdownData}
itemComponent={({ label }) => <div>{label}</div>}
/>
</div>
<div className={styles.tabsContent}>
<div className={`${styles.content} ${toggleState===1 ? styles.contentActive: ''}`}>
<p>tab1</p>
</div>
<div className={`${styles.content} ${toggleState===2 ? styles.contentActive: ''}`}>
<p>tab2</p>
</div>
<div className={`${styles.content} ${toggleState===3 ? styles.contentActive: ''}`}>
<p>tab3</p>
</div>
</div>
</Container>
</ElementHolder>
}
export default ElementTabs;