|
|
@ -3,6 +3,10 @@ import classNames from "classnames";
|
|
|
|
|
|
|
|
|
|
|
|
import { TabContext } from "utils/contexts/tab";
|
|
|
|
import { TabContext } from "utils/contexts/tab";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export function slugify(tabName) {
|
|
|
|
|
|
|
|
return tabName ? encodeURIComponent(tabName.toLowerCase()) : ''
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export default function Tab({ tab }) {
|
|
|
|
export default function Tab({ tab }) {
|
|
|
|
const { activeTab, setActiveTab } = useContext(TabContext);
|
|
|
|
const { activeTab, setActiveTab } = useContext(TabContext);
|
|
|
|
|
|
|
|
|
|
|
@ -12,12 +16,15 @@ export default function Tab({ tab }) {
|
|
|
|
"text-theme-700 dark:text-theme-200 relative h-8 w-full rounded-md flex m-1",
|
|
|
|
"text-theme-700 dark:text-theme-200 relative h-8 w-full rounded-md flex m-1",
|
|
|
|
)}>
|
|
|
|
)}>
|
|
|
|
<button id={`${tab}-tab`} type="button" role="tab"
|
|
|
|
<button id={`${tab}-tab`} type="button" role="tab"
|
|
|
|
aria-controls={`#${tab}`} aria-selected={activeTab === tab ? "true" : "false"}
|
|
|
|
aria-controls={`#${tab}`} aria-selected={activeTab === slugify(tab) ? "true" : "false"}
|
|
|
|
className={classNames(
|
|
|
|
className={classNames(
|
|
|
|
"h-full w-full rounded-md",
|
|
|
|
"h-full w-full rounded-md",
|
|
|
|
activeTab === tab ? "bg-theme-300/20 dark:bg-white/10" : "hover:bg-theme-100/20 dark:hover:bg-white/5",
|
|
|
|
activeTab === slugify(tab) ? "bg-theme-300/20 dark:bg-white/10" : "hover:bg-theme-100/20 dark:hover:bg-white/5",
|
|
|
|
)}
|
|
|
|
)}
|
|
|
|
onClick={() => { setActiveTab(tab); window.location.hash = `#${tab}`; }}
|
|
|
|
onClick={() => {
|
|
|
|
|
|
|
|
setActiveTab(slugify(tab));
|
|
|
|
|
|
|
|
window.location.hash = `#${slugify(tab)}`;
|
|
|
|
|
|
|
|
}}
|
|
|
|
>{tab}</button>
|
|
|
|
>{tab}</button>
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
);
|
|
|
|
);
|
|
|
|