You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.2 KiB
45 lines
1.2 KiB
import { useContext } from "react";
|
|
import classNames from "classnames";
|
|
|
|
import { TabContext } from "utils/contexts/tab";
|
|
|
|
function slugify(tabName) {
|
|
return tabName.toString().replace(/\s+/g, "-").toLowerCase();
|
|
}
|
|
|
|
export function slugifyAndEncode(tabName) {
|
|
return tabName !== undefined ? encodeURIComponent(slugify(tabName)) : "";
|
|
}
|
|
|
|
export default function Tab({ tab }) {
|
|
const { activeTab, setActiveTab } = useContext(TabContext);
|
|
|
|
const matchesTab = decodeURI(activeTab) === slugify(tab);
|
|
|
|
return (
|
|
<li
|
|
key={tab}
|
|
role="presentation"
|
|
className={classNames("text-theme-700 dark:text-theme-200 relative h-10 w-full rounded-md flex")}
|
|
>
|
|
<button
|
|
id={`${tab}-tab`}
|
|
type="button"
|
|
role="tab"
|
|
aria-controls={`#${tab}`}
|
|
aria-selected={matchesTab ? "true" : "false"}
|
|
className={classNames(
|
|
"w-full rounded-md m-1",
|
|
matchesTab ? "bg-theme-300/20 dark:bg-white/10" : "hover:bg-theme-100/20 dark:hover:bg-white/5",
|
|
)}
|
|
onClick={() => {
|
|
setActiveTab(slugifyAndEncode(tab));
|
|
window.location.hash = `#${slugifyAndEncode(tab)}`;
|
|
}}
|
|
>
|
|
{tab}
|
|
</button>
|
|
</li>
|
|
);
|
|
}
|