1
0
Fork 0

chore(sites): Improved tabbed example mdx component

This commit is contained in:
joostdecock 2024-01-07 16:33:38 +01:00
parent d9741254a9
commit 2d37cc6ee5

View file

@ -32,28 +32,25 @@ export const Tabs = ({ tabs = '', active = 0, children, withModal = false }) =>
}` }`
return withModal && activeTab === tabId ? ( return withModal && activeTab === tabId ? (
<div className={`flex flex-row justify-between w-1/${tablist.length}`}> <button
<button key={tabId} className={btnClasses} onClick={() => setActiveTab(tabId)}> key={tabId}
{title} className={btnClasses}
</button> onClick={() =>
<button setModal(
className={`${btnClasses} px-0`} <ModalWrapper
onClick={() => flex="col"
setModal( justify="top lg:justify-center"
<ModalWrapper slideFrom="right"
flex="col" fullWidth
justify="top lg:justify-center" >
slideFrom="right" {childrenWithTabSetter}
fullWidth </ModalWrapper>
> )
{childrenWithTabSetter} }
</ModalWrapper> >
) <span className="pr-2">{title}</span>
} <KioskIcon className="w-6 h-6 hover:text-secondary" />
> </button>
<KioskIcon className="w-6 h-6 hover:text-secondary" />
</button>
</div>
) : ( ) : (
<button key={tabId} className={btnClasses} onClick={() => setActiveTab(tabId)}> <button key={tabId} className={btnClasses} onClick={() => setActiveTab(tabId)}>
{title} {title}