dominik/homepage-plus
1
0
Fork 0
mirror of https://github.com/DI0IK/homepage-plus.git synced 2025-07-12 07:58:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Feature: tabbed layouts (#1981)

Browse source
This commit is contained in:
Denis Papec 2023-09-14 22:55:14 +01:00 • committed by GitHub
parent 768107cde8
commit 2d8160512f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 92 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/components/tab.jsx Normal file
View file

@ -0,0 +1,24 @@
import { useContext } from "react";
import classNames from "classnames";
import { TabContext } from "utils/contexts/tab";
export default function Tab({ tab }) {
const { activeTab, setActiveTab } = useContext(TabContext);
return (
<li key={tab} role="presentation"
className={classNames(
"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"
aria-controls={`#${tab}`} aria-selected={activeTab === tab ? "true" : "false"}
className={classNames(
"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",
)}
onClick={() => { setActiveTab(tab); window.location.hash = `#${tab}`; }}
>{tab}</button>
</li>
);
}