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.
homepage/src/components/tab.jsx

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>
);
}