// TODO: replace headlessui with radix-ui import { Menu, Transition } from "@headlessui/react"; import { SelectorIcon } from "@heroicons/react/outline"; import { CalendarIcon, ClockIcon, CogIcon, ExternalLinkIcon, LinkIcon, LogoutIcon, PuzzleIcon, } from "@heroicons/react/solid"; import { User } from "@prisma/client"; import { signOut, useSession } from "next-auth/client"; import Link from "next/link"; import { useRouter } from "next/router"; import React, { Fragment, useEffect, useState } from "react"; import { Toaster } from "react-hot-toast"; import classNames from "@lib/classNames"; import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry"; import { HeadSeo } from "@components/seo/head-seo"; import Avatar from "@components/ui/Avatar"; import Logo from "./Logo"; export default function Shell(props) { const router = useRouter(); // eslint-disable-next-line @typescript-eslint/no-unused-vars const [session, loading] = useSession(); const telemetry = useTelemetry(); const navigation = [ { name: "Event Types", href: "/event-types", icon: LinkIcon, current: router.pathname.startsWith("/event-types"), }, { name: "Bookings", href: "/bookings", icon: ClockIcon, current: router.pathname.startsWith("/bookings"), }, { name: "Availability", href: "/availability", icon: CalendarIcon, current: router.pathname.startsWith("/availability"), }, { name: "Integrations", href: "/integrations", icon: PuzzleIcon, current: router.pathname.startsWith("/integrations"), }, { name: "Settings", href: "/settings/profile", icon: CogIcon, current: router.pathname.startsWith("/settings"), }, ]; useEffect(() => { telemetry.withJitsu((jitsu) => { return jitsu.track(telemetryEventTypes.pageView, collectPageParameters(router.pathname)); }); }, [telemetry]); if (!loading && !session) { router.replace("/auth/login"); } const pageTitle = typeof props.heading === "string" ? props.heading : props.title; return session ? ( <>
{/* Static sidebar for desktop */}
{/* Sidebar component, swap this element with another sidebar if you like */}
{/* show top navigation for md and smaller (tablet and phones) */}

{props.heading}

{props.subtitle}

{props.CTA}
{props.children}
{/* show bottom navigation for md and smaller (tablet and phones) */} {/* add padding to content for mobile navigation*/}
) : null; } function UserDropdown({ small, bottom }: { small?: boolean; bottom?: boolean }) { const [user, setUser] = useState(null); useEffect(() => { fetch("/api/me") .then((res) => res.json()) .then((responseBody) => { setUser(responseBody.user); }); }, []); return ( {({ open }) => ( <>
{user && ( {!small && ( {user?.name} /{user?.username} )} {!small && ( )}
{({ active }) => ( Join our Slack )}
)} ); }