First public commit

2025-05-10 23:46:49 +02:00 · 2022-04-12 07:14:28 +01:00 · 2022-04-12 07:14:28 +01:00 · e05cd62e53
commit e05cd62e53
228 changed files with 17717 additions and 0 deletions
--- a/components/page-layout.tsx
+++ b/components/page-layout.tsx
@ -0,0 +1,114 @@
+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&mdash;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;