Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 85x 85x 85x 85x 85x 85x 85x 1x 1x 1x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x | import BookmarkIcon from '@/icons/BookmarkIcon';
import HistoryIcon from '@/icons/HistoryIcon';
import SearchIcon from '@/icons/SearchIcon';
import SettingsIcon from '@/icons/SettingsIcon';
import StoreIcon from '@/icons/StoreIcon';
import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
import { SyntheticEvent } from 'react';
import IconTextFader from './IconTextFader';
/**
* Generates props for a tab component.
* @param index - The index of the tab
* @param name - The name of the tab panel
* @returns Tab props including id, panel, and aria-controls
* @source
*/
function tabProps(index: number, name: string) {
return {
id: `full-width-tab-${index}`,
panel: name,
'aria-controls': `full-width-tabpanel-${index}`,
};
}
/**
* TabHeader component that renders a navigation bar with tabs for different sections of the application.
* Each tab includes an icon and text that fades based on the active state.
*
* @component
* @category Components
* @param props - Component props
*
* @example
* ```tsx
* <TabHeader page={currentPage} setPage={setCurrentPage} />
* ```
* @source
*/
export default function TabHeader({ page, setPage }: TabHeaderProps) {
const handleChange = (e: SyntheticEvent, newValue: number) => setPage(newValue);
return (
<Tabs
sx={{
'& .MuiTabs-indicator': {
backgroundColor: 'rgba(0, 0, 0, 0.8)',
},
borderRadius: 0,
}}
value={page}
onChange={handleChange}
indicatorColor="secondary"
textColor="inherit"
variant="fullWidth"
aria-label="full width tabs example"
>
<Tab
label={
<IconTextFader text="Search" active={page === 0}>
<SearchIcon />
</IconTextFader>
}
{...tabProps(0, 'search-panel')}
/>
<Tab
label={
<IconTextFader text="Suppliers" active={page === 1}>
<StoreIcon />
</IconTextFader>
}
{...tabProps(1, 'suppliers-panel')}
/>
<Tab
label={
<IconTextFader text="Favorites" active={page === 2}>
<BookmarkIcon />
</IconTextFader>
}
{...tabProps(2, 'favorites-panel')}
/>
<Tab
label={
<IconTextFader text="History" active={page === 3}>
<HistoryIcon />
</IconTextFader>
}
{...tabProps(3, 'history-panel')}
/>
<Tab
label={
<IconTextFader text="Settings" active={page === 4}>
<SettingsIcon />
</IconTextFader>
}
{...tabProps(4, 'settings-panel')}
/>
</Tabs>
);
}
|