diff --git a/components/Logo.tsx b/components/Logo.tsx new file mode 100644 index 00000000..476f0804 --- /dev/null +++ b/components/Logo.tsx @@ -0,0 +1,7 @@ +export default function Logo({small} : {small?: boolean}){ + return

+ + Calendso + +

; +} diff --git a/components/Modal.tsx b/components/Modal.tsx index 658bf706..12232876 100644 --- a/components/Modal.tsx +++ b/components/Modal.tsx @@ -1,4 +1,4 @@ -import { Fragment, useState } from 'react' +import { Fragment } from 'react' import { Dialog, Transition } from '@headlessui/react' import { CheckIcon } from '@heroicons/react/outline' diff --git a/components/Settings.tsx b/components/Settings.tsx index 1969c1ff..b1ce7f14 100644 --- a/components/Settings.tsx +++ b/components/Settings.tsx @@ -1,87 +1,71 @@ -import ActiveLink from '../components/ActiveLink'; -import {CodeIcon, CreditCardIcon, KeyIcon, UserCircleIcon, UserGroupIcon} from '@heroicons/react/outline'; +import Link from 'next/link'; +import { CreditCardIcon, UserIcon, CodeIcon, KeyIcon, UserGroupIcon } from "@heroicons/react/solid"; +import { useRouter } from "next/router"; + +function classNames(...classes) { + return classes.filter(Boolean).join(" "); +} export default function SettingsShell(props) { - return ( -
-
-
-
-
- - - {props.children} -
-
-
-
+ return ( +
+
+
+ +
- ); +
+
+ +
+
+
+
{props.children}
+
+ ); } diff --git a/components/Shell.tsx b/components/Shell.tsx index beafc8ed..039ed795 100644 --- a/components/Shell.tsx +++ b/components/Shell.tsx @@ -1,31 +1,71 @@ import Link from "next/link"; -import { useEffect, useState } from "react"; +import React, { Fragment, useEffect } from "react"; import { useRouter } from "next/router"; import { signOut, useSession } from "next-auth/client"; -import { MenuIcon, XIcon } from "@heroicons/react/outline"; +import { Menu, Transition } from "@headlessui/react"; import { collectPageParameters, telemetryEventTypes, useTelemetry } from "../lib/telemetry"; +import { SelectorIcon} from "@heroicons/react/outline"; +import { + CalendarIcon, + ClockIcon, + PuzzleIcon, + SupportIcon, + CogIcon, + ChatAltIcon, + LogoutIcon, + ExternalLinkIcon, + LinkIcon, +} from "@heroicons/react/solid"; +import Logo from "./Logo"; + +function classNames(...classes) { + return classes.filter(Boolean).join(" "); +} export default function Shell(props) { const router = useRouter(); const [session, loading] = useSession(); - const [profileDropdownExpanded, setProfileDropdownExpanded] = useState(false); - const [mobileMenuExpanded, setMobileMenuExpanded] = useState(false); 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]); - const toggleProfileDropdown = () => { - setProfileDropdownExpanded(!profileDropdownExpanded); - }; - - const toggleMobileMenu = () => { - setMobileMenuExpanded(!mobileMenuExpanded); - }; - const logoutHandler = () => { signOut({ redirect: false }).then(() => router.push("/auth/logout")); }; @@ -35,243 +75,245 @@ export default function Shell(props) { } return session ? ( -
-
-
@@ -677,7 +678,7 @@ export default function EventTypePage({ name="minimumAdvance" id="minimumAdvance" required - className="focus:ring-blue-500 focus:border-blue-500 block w-full pr-20 sm:text-sm border-gray-300 rounded-md" + className="focus:ring-black focus:border-black block w-full pr-20 sm:text-sm border-gray-300 rounded-md" defaultValue={eventType.minimumBookingNotice} />
@@ -734,7 +735,7 @@ export default function EventTypePage({ type="text" name="periodDays" id="" - className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-12 sm:text-sm border-gray-300 rounded-md" + className="shadow-sm focus:ring-black focus:border-indigo-500 block w-12 sm:text-sm border-gray-300 rounded-md" placeholder="30" defaultValue={eventType.periodDays || 30} /> @@ -742,7 +743,7 @@ export default function EventTypePage({ ref={periodDaysTypeRef} id="" name="periodDaysType" - className=" block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" + className=" block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-black focus:border-indigo-500 sm:text-sm rounded-md" defaultValue={eventType.periodCountCalendarDays ? "1" : "0"}> @@ -793,7 +794,7 @@ export default function EventTypePage({ name="length" id="length" required - className="focus:ring-blue-500 focus:border-blue-500 block w-full pr-20 sm:text-sm border-gray-300 rounded-md" + className="focus:ring-black focus:border-black block w-full pr-20 sm:text-sm border-gray-300 rounded-md" placeholder="15" defaultValue={eventType.length} /> @@ -863,7 +864,7 @@ export default function EventTypePage({
- +