algorithm/tech-interview-handbook
1
0
Fork 0
mirror of https://github.com/yangshun/tech-interview-handbook.git synced 2025-08-02 02:52:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ui][tabs] change appearance

Browse Source
This commit is contained in:
Yangshun Tay
2022-10-07 07:09:12 +08:00
parent 9de6dafef1
commit e86a7665a0
1 changed files with 27 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
packages/ui/src/Tabs/Tabs.tsx
View File

@ -19,46 +19,39 @@ export default function Tabs<T>({ label, tabs, value, onChange }: Props<T>) {
return (
<div className="w-full">
<div role="tablist">
<div className="border-b border-slate-200">
<nav aria-label={label} className="-mb-px flex space-x-4">
{tabs.map((tab) => {
const isSelected = tab.value === value;
const commonProps = {
'aria-label': tab.label,
'aria-selected': isSelected,
children: tab.label,
className: clsx(
isSelected
? 'border-primary-500 text-primary-600'
: 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300',
'whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm',
),
onClick:
onChange != null ? () => onChange(tab.value) : undefined,
role: 'tab',
};
if (tab.href != null) {
// TODO: Allow passing in of Link component.
return (
<Link
key={String(tab.value)}
href={tab.href}
{...commonProps}
/>
);
}
<nav aria-label={label} className="flex space-x-2">
{tabs.map((tab) => {
const isSelected = tab.value === value;
const commonProps = {
'aria-label': tab.label,
'aria-selected': isSelected,
children: tab.label,
className: clsx(
isSelected
? 'bg-indigo-100 text-indigo-700'
: 'hover:bg-slate-100 text-slate-500 hover:text-slate-700',
'px-3 py-2 font-medium text-sm rounded-md',
),
onClick: onChange != null ? () => onChange(tab.value) : undefined,
role: 'tab',
};
if (tab.href != null) {
// TODO: Allow passing in of Link component.
return (
<button
<Link
key={String(tab.value)}
type="button"
href={tab.href}
{...commonProps}
/>
);
})}
</nav>
</div>
}
return (
<button key={String(tab.value)} type="button" {...commonProps} />
);
})}
</nav>
</div>
</div>
);