46 lines
1.5 KiB
TypeScript
46 lines
1.5 KiB
TypeScript
import { NavLink, Outlet } from 'react-router-dom';
|
|
import { twMerge } from 'tailwind-merge';
|
|
|
|
import { DotsPattern } from '@shared/icons';
|
|
|
|
export function BrowseScreen() {
|
|
return (
|
|
<div className="relative h-full w-full">
|
|
<div className="absolute left-0 right-0 top-4 z-30 flex w-full items-center justify-between px-3">
|
|
<div className="w-10" />
|
|
<div className="inline-flex gap-1 rounded-full border-t border-white/10 bg-white/20 p-1 backdrop-blur-xl">
|
|
<NavLink
|
|
to="/browse/"
|
|
className={({ isActive }) =>
|
|
twMerge(
|
|
'inline-flex h-8 w-20 items-center justify-center rounded-full text-sm font-semibold',
|
|
isActive ? 'bg-white/10 hover:bg-white/20' : ' hover:bg-white/5'
|
|
)
|
|
}
|
|
>
|
|
Users
|
|
</NavLink>
|
|
<NavLink
|
|
to="/browse/relays"
|
|
className={({ isActive }) =>
|
|
twMerge(
|
|
'inline-flex h-8 w-20 items-center justify-center rounded-full text-sm font-semibold',
|
|
isActive ? 'bg-white/10 hover:bg-white/20' : ' hover:bg-white/5'
|
|
)
|
|
}
|
|
>
|
|
Relays
|
|
</NavLink>
|
|
</div>
|
|
<div className="w-10" />
|
|
</div>
|
|
<div className="absolute z-10 h-full w-full">
|
|
<DotsPattern className="h-full w-full text-white/10" />
|
|
</div>
|
|
<div className="relative z-20">
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|