open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tab styling

Browse Source
This commit is contained in:
mantikoros 2022-04-08 16:10:03 -05:00
parent 5064108395
commit 89444fa147
1 changed files with 29 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
web/components/layout/tabs.tsx
View File

@ -17,31 +17,35 @@ export function Tabs(props: { tabs: Tab[]; defaultIndex?: number }) {
return ( return (
<div> <div>
<nav className="flex space-x-4" aria-label="Tabs"> <div className="border-b border-gray-200">
{tabs.map((tab, i) => ( <nav className="-mb-px flex space-x-8" aria-label="Tabs">
<Link href={tab.href ?? '#'} key={tab.title} shallow={!!tab.href}> {tabs.map((tab, i) => (
<a <Link href={tab.href ?? '#'} key={tab.title} shallow={!!tab.href}>
key={tab.title} <a
className={clsx( key={tab.title}
tab.title === activeTab.title onClick={(e) => {
? 'bg-gray-200 text-gray-700' if (!tab.href) {
: 'text-gray-500 hover:bg-gray-100 hover:text-gray-700', e.preventDefault()
'rounded-md px-3 py-2 text-sm font-medium' }
)} setActiveIndex(i)
aria-current={tab.title === activeTab.title ? 'page' : undefined} }}
onClick={(e) => { className={clsx(
if (!tab.href) { activeIndex === i
e.preventDefault() ? 'border-indigo-500 text-indigo-600'
} : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
setActiveIndex(i) 'cursor-pointer whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium'
}} )}
> aria-current={activeIndex === i ? 'page' : undefined}
{tab.tabIcon ? <span className="mr-2">{tab.tabIcon}</span> : null} >
{tab.title} {tab.tabIcon ? (
</a> <span className="mr-2">{tab.tabIcon}</span>
</Link> ) : null}
))} {tab.title}
</nav> </a>
</Link>
))}
</nav>
</div>
<div className="mt-4">{activeTab.content}</div> <div className="mt-4">{activeTab.content}</div>
</div> </div>