mirror of
https://github.com/movie-web/movie-web.git
synced 2024-06-03 06:08:49 +02:00
24aeb68f55
Co-authored-by: Jip Frijlink <JipFr@users.noreply.github.com>
66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
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 { useBannerSize } from "@/hooks/useBanner";
|
|
import { BrandPill } from "./BrandPill";
|
|
|
|
export interface NavigationProps {
|
|
children?: ReactNode;
|
|
bg?: boolean;
|
|
}
|
|
|
|
export function Navigation(props: NavigationProps) {
|
|
const bannerHeight = useBannerSize();
|
|
|
|
return (
|
|
<div
|
|
className="fixed left-0 right-0 top-0 z-20 min-h-[150px] bg-gradient-to-b from-denim-300 via-denim-300 to-transparent sm:from-transparent"
|
|
style={{
|
|
top: `${bannerHeight}px`,
|
|
}}
|
|
>
|
|
<div className="fixed left-0 right-0 flex 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>
|
|
</div>
|
|
);
|
|
}
|