hykocx
77ca4fe66f
- reduce app name font size from text-lg to text-sm in AdminTop mobile header - make profile page cards full-width on mobile with sm:min-w-3/5 breakpoint - stack photo upload layout vertically on mobile using flex-col sm:flex-row - add flex-wrap to photo action buttons for small screens - make TabNav horizontally scrollable with hidden scrollbar on mobile - add shrink-0 and whitespace-nowrap to tab buttons to prevent wrapping
28 lines
1.1 KiB
JavaScript
28 lines
1.1 KiB
JavaScript
'use client';
|
|
|
|
|
|
const TabNav = ({ tabs = [], activeTab, onTabChange}) => {
|
|
return (
|
|
<div className="w-full flex overflow-x-auto border-b border-neutral-200 dark:border-neutral-800/70 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
|
|
{tabs.map((tab) => {
|
|
const isActive = tab.id === activeTab;
|
|
return (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => onTabChange(tab.id)}
|
|
className={`shrink-0 whitespace-nowrap cursor-pointer px-4 py-2.5 text-[13px] font-medium transition-colors duration-[120ms] ease-out border-b-2 -mb-px ${
|
|
isActive
|
|
? 'border-neutral-900 dark:border-white text-neutral-900 dark:text-white'
|
|
: 'border-transparent text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'
|
|
}`}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TabNav;
|