timmypidashev/web
1
0
Fork 0
mirror of https://github.com/timmypidashev/web.git synced 2026-04-14 11:03:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

center header:

Browse Source
This commit is contained in:
Timothy Pidashev
2024-03-18 19:45:15 -07:00
parent d69b327bb6
commit fbcc0385a4
1 changed files with 26 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/web/src/components/header.jsx
View File

@@ -35,30 +35,32 @@ function Header() {
} }
return ( return (
<div className="flex space-x-1"> <div className="flex justify-center items-center">
{tabs.map((tab) => ( <div className="flex space-x-1">
<Link key={tab.id} href={`/${tab.id}`} passHref> {tabs.map((tab) => (
<motion.a <Link key={tab.id} href={`/${tab.id}`} passHref>
onClick={() => setActiveTab(tab.id)} <motion.a
className={`${ onClick={() => setActiveTab(tab.id)}
activeTab === tab.id ? "" : "hover:text-white/60" className={`${
} relative rounded-full px-3 py-1.5 text-sm font-medium text-white outline-sky-400 transition focus-visible:outline-2`} activeTab === tab.id ? "" : "hover:text-white/60"
style={{ } relative rounded-full px-3 py-1.5 text-sm font-medium text-white outline-sky-400 transition focus-visible:outline-2`}
WebkitTapHighlightColor: "transparent", style={{
}} WebkitTapHighlightColor: "transparent",
> }}
{activeTab === tab.id && ( >
<motion.span {activeTab === tab.id && (
layoutId="bubble" <motion.span
className="absolute inset-0 z-10 bg-white mix-blend-difference" layoutId="bubble"
style={{ borderRadius: 9999 }} className="absolute inset-0 z-10 bg-white mix-blend-difference"
transition={{ type: "spring", bounce: 0.2, duration: 0.6 }} style={{ borderRadius: 9999 }}
/> transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
)} />
{tab.label} )}
</motion.a> {tab.label}
</Link> </motion.a>
))} </Link>
))}
</div>
</div> </div>
); );
} }