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.
55 lines
1.7 KiB
55 lines
1.7 KiB
import { ReactNode } from "react"; |
|
import { Link } from "react-router-dom"; |
|
import { IconPatch } from "@/components/buttons/IconPatch"; |
|
import { Icons } from "@/components/Icon"; |
|
import { conf } from "@/setup/config"; |
|
import { BrandPill } from "./BrandPill"; |
|
|
|
export interface NavigationProps { |
|
children?: ReactNode; |
|
bg?: boolean; |
|
} |
|
|
|
export function Navigation(props: NavigationProps) { |
|
return ( |
|
<div className="fixed left-0 right-0 top-0 z-10 mt-[env(safea-area-inset-top)] flex min-h-[88px] items-center justify-between py-5 px-7"> |
|
<div |
|
className={`${ |
|
props.bg ? "opacity-100" : "opacity-0" |
|
} absolute inset-0 block bg-denim-100 transition-opacity duration-300`} |
|
> |
|
<div className="pointer-events-none absolute -bottom-24 h-24 w-full bg-gradient-to-b from-denim-100 to-transparent" /> |
|
</div> |
|
<div className="relative flex w-full items-center justify-center sm:w-fit"> |
|
<div className="mr-auto sm:mr-6"> |
|
<Link to="/"> |
|
<BrandPill clickable /> |
|
</Link> |
|
</div> |
|
{props.children} |
|
</div> |
|
<div |
|
className={`${ |
|
props.children ? "hidden sm:flex" : "flex" |
|
} relative flex-row gap-4`} |
|
> |
|
<a |
|
href={conf().DISCORD_LINK} |
|
target="_blank" |
|
rel="noreferrer" |
|
className="text-2xl text-white" |
|
> |
|
<IconPatch icon={Icons.DISCORD} clickable /> |
|
</a> |
|
<a |
|
href={conf().GITHUB_LINK} |
|
target="_blank" |
|
rel="noreferrer" |
|
className="text-2xl text-white" |
|
> |
|
<IconPatch icon={Icons.GITHUB} clickable /> |
|
</a> |
|
</div> |
|
</div> |
|
); |
|
}
|
|
|