scoresaber-reloaded-v2/src/components/Navbar.tsx
Liam 17baa366c8
Some checks failed
deploy / deploy (push) Failing after 39s
color changes and added a navbar
2023-10-20 11:54:20 +01:00

74 lines
1.8 KiB
TypeScript

import {
CogIcon,
MagnifyingGlassIcon,
UserIcon,
} from "@heroicons/react/20/solid";
import { GlobeAltIcon } from "@heroicons/react/24/outline";
import Button from "./Button";
interface ButtonProps {
text: string;
icon?: JSX.Element;
href?: string;
children?: React.ReactNode;
}
function NavbarButton({ text, icon, href, children }: ButtonProps) {
return (
<div className="group">
<a
className="flex w-fit transform-gpu items-center justify-center gap-1 rounded-md p-3 transition-all hover:cursor-pointer hover:bg-blue-500"
href={href}
>
<>
{icon}
<p className="hidden xs:block">{text}</p>
</>
</a>
{children && (
<div className="absolute z-20 hidden divide-y rounded-md bg-neutral-600 shadow-sm group-hover:flex">
<div className="p-2">{children}</div>
</div>
)}
</div>
);
}
export default function Navbar() {
return (
<>
<div className="flex h-fit w-full rounded-md bg-gray-800">
<NavbarButton text="Friends" icon={<UserIcon height={20} width={20} />}>
<p className="text-sm font-bold">No friends, add someone!</p>
<Button
className="mt-2"
text="Search"
url="/search"
icon={<MagnifyingGlassIcon height={20} width={20} />}
/>
</NavbarButton>
<NavbarButton
text="Ranking"
icon={<GlobeAltIcon height={20} width={20} />}
href="/ranking/global"
/>
<div className="m-auto" />
<NavbarButton
text="Search"
icon={<MagnifyingGlassIcon height={20} width={20} />}
href="/search"
/>
<NavbarButton
text="Settings"
icon={<CogIcon height={20} width={20} />}
href="/settings"
/>
</div>
</>
);
}