mirror of
https://github.com/lukevella/rallly.git
synced 2025-04-29 18:26:34 +02:00
114 lines
3.5 KiB
TypeScript
114 lines
3.5 KiB
TypeScript
import Link from "next/link";
|
|
import * as React from "react";
|
|
import Github from "./home/github.svg";
|
|
import Logo from "../public/logo.svg";
|
|
import Footer from "./page-layout/footer";
|
|
import Head from "next/head";
|
|
import { useRouter } from "next/router";
|
|
import clsx from "clsx";
|
|
import DotsVertical from "@/components/icons/dots-vertical.svg";
|
|
import dynamic from "next/dynamic";
|
|
import { createBreakpoint } from "react-use";
|
|
|
|
const Popover = dynamic(() => import("./popover"), { ssr: false });
|
|
export interface PageLayoutProps {
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
const useBreakpoint = createBreakpoint({ sm: 640, md: 768, lg: 1024 });
|
|
|
|
const Menu: React.VoidFunctionComponent<{ className: string }> = ({
|
|
className,
|
|
}) => {
|
|
const { pathname } = useRouter();
|
|
return (
|
|
<nav className={className}>
|
|
<Link href="/">
|
|
<a
|
|
className={clsx(
|
|
"text-gray-400 hover:text-indigo-500 hover:underline-offset-2 hover:no-underline transition-colors",
|
|
{
|
|
"font-bold text-gray-600 pointer-events-none":
|
|
pathname === "/home",
|
|
},
|
|
)}
|
|
>
|
|
Home
|
|
</a>
|
|
</Link>
|
|
<Link href="https://blog.rallly.co">
|
|
<a
|
|
className={clsx(
|
|
"text-gray-400 hover:text-indigo-500 hover:underline-offset-2 hover:no-underline transition-colors",
|
|
)}
|
|
>
|
|
Blog
|
|
</a>
|
|
</Link>
|
|
<Link href="/support">
|
|
<a
|
|
className={clsx(
|
|
"text-gray-400 hover:text-indigo-500 hover:underline-offset-2 hover:no-underline transition-colors",
|
|
{
|
|
"font-bold text-gray-600 pointer-events-none":
|
|
pathname === "/support",
|
|
},
|
|
)}
|
|
>
|
|
Support
|
|
</a>
|
|
</Link>
|
|
<Link href="https://github.com/lukevella/Rallly">
|
|
<a className="text-gray-400 hover:text-indigo-500 hover:underline-offset-2 hover:no-underline transition-colors">
|
|
<Github className="w-8" />
|
|
</a>
|
|
</Link>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
const PageLayout: React.VoidFunctionComponent<PageLayoutProps> = ({
|
|
children,
|
|
}) => {
|
|
const breakpoint = useBreakpoint();
|
|
return (
|
|
<div className="bg-pattern h-full overflow-x-hidden">
|
|
<Head>
|
|
<title>Rallly - Support</title>
|
|
</Head>
|
|
<div className="">
|
|
<div className="py-8 flex items-center px-8 max-w-7xl mx-auto">
|
|
<div className="grow">
|
|
<div className="inline-block relative">
|
|
<Link href="/">
|
|
<a>
|
|
<Logo className="w-40 text-indigo-500" alt="Rallly" />
|
|
</a>
|
|
</Link>
|
|
<span className="absolute transition-colors text-sm text-slate-400 -bottom-6 right-0">
|
|
Yes—with 3 <em>L</em>s
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<Menu className="hidden md:flex space-x-8 items-center" />
|
|
{breakpoint === "sm" ? (
|
|
<Popover
|
|
placement="left-start"
|
|
trigger={
|
|
<button className="text-gray-400 hover:text-indigo-500 hover:underline-offset-2 hover:no-underline transition-colors">
|
|
<DotsVertical className="w-5" />
|
|
</button>
|
|
}
|
|
>
|
|
<Menu className="flex flex-col space-y-2" />
|
|
</Popover>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
<div className="md:min-h-[calc(100vh-460px)]">{children}</div>
|
|
<Footer />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PageLayout;
|