🍰🚥 ↝ [ FCDB-24 ] Taking a new approach to the saas/onboarding landing…

… area
Signal-K · Jan 31, 2024 · 049555b · 049555b
1 parent fee4049
commit 049555b
Show file tree

Hide file tree

Showing 3 changed files with 256 additions and 32 deletions.
diff --git a/components/Section/Navbar.tsx b/components/Section/Navbar.tsx
@@ -1,5 +1,5 @@
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/Avatar";
-import { useEffect, Fragment, useState } from "react";
+import { useEffect, Fragment, useState, useRef } from "react";
 import Link from "next/link";
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import { Dialog, Disclosure, Popover, Transition } from '@headlessui/react'
@@ -13,34 +13,257 @@ import {
   XMarkIcon,
 } from '@heroicons/react/24/outline'
 import { ChevronDownIcon, PhoneIcon, PlayCircleIcon } from '@heroicons/react/20/solid';
+import { MdOutlineSpaceDashboard } from 'react-icons/md';
+import { TfiDashboard } from 'react-icons/tfi';
+import { HiBars3 } from 'react-icons/hi2';
+import { AiFillCloseCircle } from 'react-icons/ai';
 
-export const NavbarMinimal: React.FC = () => {
-    const supabase  = useSupabaseClient();
-    const session = useSession();
-
-    return (
-        <nav className="py-4 border-bg">
-            <div className="container flex justify-between items-center mx-auto max-w-screen-xl">
-                <div className="flex items-center space-x-4 w-80">
-                    <Link href="/" className="font-bold text-xl text-white">
-                        Star Sailors<span className="text-red-600"></span>
-                    </Link>
-                    <div className="flex items-center space-x-4 flex-grow justify-center">
-                        <Link href="/nav-item1" className="text-gray-500 hover:text-gray-700">NavItem1</Link>
-                        <Link href="/nav-item2" className="text-gray-500 hover:text-gray-700">NavItem2</Link>
-                        <Link href="/nav-item3" className="text-gray-500 hover:text-gray-700">NavItem3</Link>
-                        <Link href="/nav-item4" className="text-gray-500 hover:text-gray-700">NavItem4</Link>
+const UserMenuItems = ({
+  user,
+  setMobileMenuOpen,
+}: {
+  user?: { isAdmin: boolean }; // Adjust the type based on your actual user structure
+  setMobileMenuOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+}) => {
+  const path = window.location.pathname;
+
+  const handleMobileMenuClick = () => {
+    if (setMobileMenuOpen) {
+      setMobileMenuOpen(false);
+    }
+  };
+
+  return (
+    <>
+      <ul
+        className={`flex flex-col gap-5 border-b border-stroke py-4 dark:border-strokedark ${
+          path === '/admin' ? 'px-6' : 'sm:px-6'
+        }`}
+      >
+        {path === '/' || path === '/admin' ? (
+          <li>
+            <Link href='/demo-app'>
+              <a className='flex items-center gap-3.5 text-sm font-medium duration-300 ease-in-out hover:text-yellow-500'>
+                <MdOutlineSpaceDashboard size='1.1rem' />
+                AI Scheduler (Demo App)
+              </a>
+            </Link>
+          </li>
+        ) : null}
+        <li>
+        <Link href='/account'>
+            <a
+              onClick={handleMobileMenuClick}
+              className='flex items-center gap-3.5 text-sm font-medium duration-300 ease-in-out hover:text-yellow-500'
+            >
+            <svg
+              className='fill-current'
+              width='18'
+              height='18'
+              viewBox='0 0 22 22'
+              fill='none'
+              xmlns='http://www.w3.org/2000/svg'
+            >
+              <path
+                d='M20.8656 8.86874C20.5219 8.49062 20.0406 8.28437 19.525 8.28437H19.4219C19.25 8.28437 19.1125 8.18124 19.0781 8.04374C19.0437 7.90624 18.975 7.80312 18.9406 7.66562C18.8719 7.52812 18.9406 7.39062 19.0437 7.28749L19.1125 7.21874C19.4906 6.87499 19.6969 6.39374 19.6969 5.87812C19.6969 5.36249 19.525 4.88124 19.1469 4.50312L17.8062 3.12812C17.0844 2.37187 15.8469 2.33749 15.0906 3.09374L14.9875 3.16249C14.8844 3.26562 14.7125 3.29999 14.5406 3.23124C14.4031 3.16249 14.2656 3.09374 14.0937 3.05937C13.9219 2.99062 13.8187 2.85312 13.8187 2.71562V2.54374C13.8187 1.47812 12.9594 0.618744 11.8937 0.618744H9.96875C9.45312 0.618744 8.97187 0.824994 8.62812 1.16874C8.25 1.54687 8.07812 2.02812 8.07812 2.50937V2.64687C8.07812 2.78437 7.975 2.92187 7.8375 2.99062C7.76875 3.02499 7.73437 3.02499 7.66562 3.05937C7.52812 3.12812 7.35625 3.09374 7.25312 2.99062L7.18437 2.88749C6.84062 2.50937 6.35937 2.30312 5.84375 2.30312C5.32812 2.30312 4.84687 2.47499 4.46875 2.85312L3.09375 4.19374C2.3375 4.91562 2.30312 6.15312 3.05937 6.90937L3.12812 7.01249C3.23125 7.11562 3.26562 7.28749 3.19687 7.39062C3.12812 7.52812 3.09375 7.63124 3.025 7.76874C2.95625 7.90624 2.85312 7.97499 2.68125 7.97499H2.57812C2.0625 7.97499 1.58125 8.14687 1.20312 8.52499C0.824996 8.86874 0.618746 9.34999 0.618746 9.86562L0.584371 11.7906C0.549996 12.8562 1.40937 13.7156 2.475 13.75H2.57812C2.75 13.75 2.8875 13.8531 2.92187 13.9906C2.99062 14.0937 3.05937 14.1969 3.09375 14.3344C3.12812 14.4719 3.09375 14.6094 2.99062 14.7125L2.92187 14.7812C2.54375 15.125 2.3375 15.6062 2.3375 16.1219C2.3375 16.6375 2.50937 17.1187 2.8875 17.4969L4.22812 18.8719C4.95 19.6281 6.1875 19.6625 6.94375 18.9062L7.04687 18.8375C7.15 18.7344 7.32187 18.7 7.49375 18.7687C7.63125 18.8375 7.76875 18.9062 7.94062 18.9406C8.1125 19.0094 8.21562 19.1469 8.21562 19.2844V19.4219C8.21562 20.4875 9.075 21.3469 10.1406 21.3469H12.0656C13.1312 21.3469 13.9906 20.4875 13.9906 19.4219V19.2844C13.9906 19.1469 14.0937 19.0094 14.2312 18.9406C14.3 18.9062 14.3344 18.9062 14.4031 18.8719C14.575 18.8031 14.7125 18.8375 14.8156 18.9406L14.8844 19.0437C15.2281 19.4219 15.7094 19.6281 16.225 19.6281C16.7406 19.6281 17.2219 19.4562 17.6 19.0781L18.975 17.7375C19.7312 17.0156 19.7656 15.7781 19.0094 15.0219L18.9406 14.9187C18.8375 14.8156 18.8031 14.6437 18.8719 14.5406C18.9406 14.4031 18.975 14.3 19.0437 14.1625C19.1125 14.025 19.25 13.9562 19.3875 13.9562H19.4906H19.525C20.5562 13.9562 21.4156 13.1312 21.45 12.0656L21.4844 10.1406C21.4156 9.72812 21.2094 9.21249 20.8656 8.86874ZM19.8344 12.1C19.8344 12.3062 19.6625 12.4781 19.4562 12.4781H19.3531H19.3187C18.5281 12.4781 17.8062 12.9594 17.5312 13.6469C17.4969 13.75 17.4281 13.8531 17.3937 13.9562C17.0844 14.6437 17.2219 15.5031 17.7719 16.0531L17.8406 16.1562C17.9781 16.2937 17.9781 16.5344 17.8406 16.6719L16.4656 18.0125C16.3625 18.1156 16.2594 18.1156 16.1906 18.1156C16.1219 18.1156 16.0187 18.1156 15.9156 18.0125L15.8469 17.9094C15.2969 17.325 14.4719 17.1531 13.7156 17.4969L13.5781 17.5656C12.8219 17.875 12.3406 18.5625 12.3406 19.3531V19.4906C12.3406 19.6969 12.1687 19.8687 11.9625 19.8687H10.0375C9.83125 19.8687 9.65937 19.6969 9.65937 19.4906V19.3531C9.65937 18.5625 9.17812 17.8406 8.42187 17.5656C8.31875 17.5312 8.18125 17.4625 8.07812 17.4281C7.80312 17.2906 7.52812 17.2562 7.25312 17.2562C6.77187 17.2562 6.29062 17.4281 5.9125 17.8062L5.84375 17.8406C5.70625 17.9781 5.46562 17.9781 5.32812 17.8406L3.9875 16.4656C3.88437 16.3625 3.88437 16.2594 3.88437 16.1906C3.88437 16.1219 3.88437 16.0187 3.9875 15.9156L4.05625 15.8469C4.64062 15.2969 4.8125 14.4375 4.50312 13.75C4.46875 13.6469 4.43437 13.5437 4.36562 13.4406C4.09062 12.7187 3.40312 12.2031 2.6125 12.2031H2.50937C2.30312 12.2031 2.13125 12.0312 2.13125 11.825L2.16562 9.89999C2.16562 9.76249 2.23437 9.69374 2.26875 9.62499C2.30312 9.59062 2.40625 9.52187 2.54375 9.52187H2.64687C3.4375 9.55624 4.15937 9.07499 4.46875 8.35312C4.50312 8.24999 4.57187 8.14687 4.60625 8.04374C4.91562 7.35624 4.77812 6.49687 4.22812 5.94687L4.15937 5.84374C4.02187 5.70624 4.02187 5.46562 4.15937 5.32812L5.53437 3.98749C5.6375 3.88437 5.74062 3.88437 5.80937 3.88437C5.87812 3.88437 5.98125 3.88437 6.08437 3.98749L6.15312 4.09062C6.70312 4.67499 7.52812 4.84687 8.28437 4.53749L8.42187 4.46874C9.17812 4.15937 9.65937 3.47187 9.65937 2.68124V2.54374C9.65937 2.40624 9.72812 2.33749 9.7625 2.26874C9.79687 2.19999 9.9 2.16562 10.0375 2.16562H11.9625C12.1687 2.16562 12.3406 2.33749 12.3406 2.54374V2.68124C12.3406 3.47187 12.8219 4.19374 13.5781 4.46874C13.6812 4.50312 13.8187 4.57187 13.9219 4.60624C14.6437 4.94999 15.5031 4.81249 16.0875 4.26249L16.1906 4.19374C16.3281 4.05624 16.5687 4.05624 16.7062 4.19374L18.0469 5.56874C18.15 5.67187 18.15 5.77499 18.15 5.84374C18.15 5.91249 18.1156 6.01562 18.0469 6.11874L17.9781 6.18749C17.3594 6.70312 17.1875 7.56249 17.4625 8.24999C17.4969 8.35312 17.5312 8.45624 17.6 8.55937C17.875 9.28124 18.5625 9.79687 19.3531 9.79687H19.4562C19.5937 9.79687 19.6625 9.86562 19.7312 9.89999C19.8 9.93437 19.8344 10.0375 19.8344 10.175V12.1Z'
+                fill=''
+              />
+              <path
+                d='M11 6.32498C8.42189 6.32498 6.32501 8.42186 6.32501 11C6.32501 13.5781 8.42189 15.675 11 15.675C13.5781 15.675 15.675 13.5781 15.675 11C15.675 8.42186 13.5781 6.32498 11 6.32498ZM11 14.1281C9.28126 14.1281 7.87189 12.7187 7.87189 11C7.87189 9.28123 9.28126 7.87186 11 7.87186C12.7188 7.87186 14.1281 9.28123 14.1281 11C14.1281 12.7187 12.7188 14.1281 11 14.1281Z'
+                fill=''
+              />
+            </svg>
+            Account Settings
+          </a>
+          </Link>
+        </li>
+      </ul>
+      {!!user?.isAdmin && (
+        <ul
+          className={`flex flex-col gap-5 border-b border-stroke py-4 dark:border-strokedark ${
+            path === '/admin' ? 'px-6' : 'sm:px-6'
+          }`}
+        >
+          <li className='flex items-center gap-3.5 text-sm font-medium duration-300 ease-in-out hover:text-yellow-500'>
+          <Link href='/admin'>
+              <a
+                onClick={handleMobileMenuClick}
+                className='flex items-center gap-3.5 text-sm font-medium duration-300 ease-in-out hover:text-yellow-500'
+              >
+                <TfiDashboard size='1.1rem' />
+                Admin Dashboard
+              </a>
+            </Link>
+          </li>
+        </ul>
+      )}
+      <button
+        className={`flex items-center gap-3.5 py-4 text-sm font-medium duration-300 ease-in-out hover:text-yellow-500 ${
+          path === '/admin' ? 'px-6' : 'sm:px-6'
+        }`}
+      >
+        <svg
+          className='fill-current'
+          width='18'
+          height='18'
+          viewBox='0 0 22 22'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+        >
+          <path
+            d='M15.5375 0.618744H11.6531C10.7594 0.618744 10.0031 1.37499 10.0031 2.26874V4.64062C10.0031 5.05312 10.3469 5.39687 10.7594 5.39687C11.1719 5.39687 11.55 5.05312 11.55 4.64062V2.23437C11.55 2.16562 11.5844 2.13124 11.6531 2.13124H15.5375C16.3625 2.13124 17.0156 2.78437 17.0156 3.60937V18.3562C17.0156 19.1812 16.3625 19.8344 15.5375 19.8344H11.6531C11.5844 19.8344 11.55 19.8 11.55 19.7312V17.3594C11.55 16.9469 11.2062 16.6031 10.7594 16.6031C10.3125 16.6031 10.0031 16.9469 10.0031 17.3594V19.7312C10.0031 20.625 10.7594 21.3812 11.6531 21.3812H15.5375C17.2219 21.3812 18.5625 20.0062 18.5625 18.3562V3.64374C18.5625 1.95937 17.1875 0.618744 15.5375 0.618744Z'
+            fill=''
+          />
+          <path
+            d='M6.05001 11.7563H12.2031C12.6156 11.7563 12.9594 11.4125 12.9594 11C12.9594 10.5875 12.6156 10.2438 12.2031 10.2438H6.08439L8.21564 8.07813C8.52501 7.76875 8.52501 7.2875 8.21564 6.97812C7.90626 6.66875 7.42501 6.66875 7.11564 6.97812L3.67814 10.4844C3.36876 10.7938 3.36876 11.275 3.67814 11.5844L7.11564 15.0906C7.25314 15.2281 7.45939 15.3312 7.66564 15.3312C7.87189 15.3312 8.04376 15.2625 8.21564 15.125C8.52501 14.8156 8.52501 14.3344 8.21564 14.025L6.05001 11.7563Z'
+            fill=''
+          />
+        </svg>
+        Log Out
+      </button>
+    </>
+  );
+};
+
+const UserDropdownMenu = ({ user } : { user: string }) => {
+  const supabase = useSupabaseClient();
+  const session = useSession();
+
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const trigger = useRef<any>(null);
+  const dropdown = useRef<any>(null);
+  const toggleDropdown = () => setDropdownOpen((prev) => !prev);
+}
+
+const navigation = [
+  {
+    name: 'Home', href: '/' // Was originally labelled as "Star Sailors" but I've decided that we'll provide that context via the logo
+  },
+  {
+    name: 'Explore', href: '/garden'
+  },
+  {
+    name: 'Gather', href: '/gather'
+  },
+  {
+    name: 'Inventory', href: '/inventory' // I think we should probably have a page for building as well, maybe even feed, faction, but I want to see a 4-pronged approach for now
+  },
+];
+
+const NavLogo = () => (
+  <img className="h-8 w-8" src='https://avatars.githubusercontent.com/u/78838067?s=200&v=4' alt='Star Sailors' />
+);
+
+export default function Navigation() {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  return  (
+    <header className='absolute inset-x-0 top-0 z-50 shadow sticky bg-white bg-opacity-50 backdrop-blur-lg backdrop-filter dark:border-strokedark dark:bg-boxdark-2'>
+      <nav
+        className='flex items-center justify-between p-6 lg:px-8'
+        aria-label='Global'
+      >
+        <div className='flex lg:flex-1'>
+          <a href='/' className='-m-1.5 p-1.5'>
+            <img className='h-8 w-8' src='https://avatars.githubusercontent.com/u/78838067?s=200&v=4' alt='Star Sailors' />
+          </a>
+        </div>
+        <div className='flex lg:hidden'>
+          <button
+            type='button'
+            className='-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700 dark:text-white'
+            onClick={() => setMobileMenuOpen(true)}
+          >
+            <span className='sr-only'>Open main menu</span>
+            <HiBars3 className='h-6 w-6' aria-hidden='true' />
+          </button>
+        </div>
+        <div className='hidden lg:flex lg:gap-x-12'>
+          {navigation.map((item) => (
+            <a
+              key={item.name}
+              href={item.href}
+              className='text-sm font-semibold leading-6 text-gray-900 duration-300 ease-in-out hover:text-yellow-500 dark:text-white'
+            >
+              {item.name}
+            </a>
+          ))}
+        </div>
+        <div className='hidden lg:flex lg:flex-1 gap-3 justify-end items-center'>
+          <ul className='flex justify-center items-center gap-2 sm:gap-4'>
+            {/* <DarkModeSwitcher /> */}
+          </ul>
+
+          {/* {isUserLoading ? null : !user ? (
+            <a
+              href={!user ? '/login' : '/account'}
+              className='text-sm font-semibold leading-6 ml-4'
+            >
+              <div className='flex items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white'>
+                Log in <BiLogIn size='1.1rem' className='ml-1 mt-[0.1rem]' />
+              </div>
+            </a>
+          ) : (
+            <div className='ml-4'>
+              <DropdownUser user={user} />
+            </div>
+          )} */}
+        </div>
+      </nav>
+      <Dialog
+        as='div'
+        className='lg:hidden'
+        open={mobileMenuOpen}
+        onClose={setMobileMenuOpen}
+      >
+        <div className='fixed inset-0 z-50' />
+        <Dialog.Panel className='fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white dark:text-white dark:bg-boxdark px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10'>
+          <div className='flex items-center justify-between'>
+            <a href='/' className='-m-1.5 p-1.5'>
+              <span className='sr-only'>Your SaaS</span>
+              <NavLogo />
+            </a>
+            <button
+              type='button'
+              className='-m-2.5 rounded-md p-2.5 text-gray-700 dark:text-gray-50'
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              <span className='sr-only'>Close menu</span>
+              <AiFillCloseCircle className='h-6 w-6' aria-hidden='true' />
+            </button>
+          </div>
+          <div className='mt-6 flow-root'>
+            <div className='-my-6 divide-y divide-gray-500/10'>
+              <div className='space-y-2 py-6'>
+                {navigation.map((item) => (
+                  <a
+                    key={item.name}
+                    href={item.href}
+                    onClick={() => setMobileMenuOpen(false)}
+                    className='-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50 dark:text-white hover:dark:bg-boxdark-2'
+                  >
+                    {item.name}
+                  </a>
+                ))}
+              </div>
+              <div className='py-6'>
+                {/* {isUserLoading ? null : !user ? (
+                  <Link to='/login'>
+                    <div className='flex justify-end items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white'>
+                      Log in <BiLogIn size='1.1rem' className='ml-1' />
                     </div>
-                </div>
-                <Link href="/profile">
-                    <Avatar className="cursor-pointer rounded-md">
-                        <AvatarImage src="https://avatars.githubusercontent.com/u/78838067?s=200&v=4" />
-                    </Avatar>
-                </Link>
+                  </Link>
+                ) : (
+                  <UserMenuItems user={user} setMobileMenuOpen={setMobileMenuOpen}/>
+                )} */}
+              </div>
             </div>
-        </nav>
-    );
-};
+          </div>
+        </Dialog.Panel>
+      </Dialog>
+    </header>
+  )
+}
 
 const products = [
   { name: 'Your planets', description: '', href: '/garden', icon: ChartPieIcon },
@@ -56,7 +279,7 @@ function classNames(...classes) {
   return classes.filter(Boolean).join(' ')
 }
 
-export default function Navbar() {
+export function Navbar() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 
   return (

diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
     "react": "^18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.48.2",
+    "react-icons": "^5.0.1",
     "react-spinners": "^0.13.8",
     "tailwind-merge": "^2.0.0",
     "tailwindcss": "^3.2.4",

diff --git a/yarn.lock b/yarn.lock
@@ -1050,11 +1050,6 @@
   dependencies:
     tslib "^2.4.0"
 
-"@tailwindcss/aspect-ratio@^0.4.2":
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.2.tgz#9ffd52fee8e3c8b20623ff0dcb29e5c21fb0a9ba"
-  integrity sha512-8QPrypskfBa7QIMuKHg2TA7BqES6vhBrDLOv8Unb6FcFyd3TjKbc6lcmb9UPQHxfl24sXoJ41ux/H7qQQvfaSQ==
-
 "@tailwindcss/forms@^0.5.3":
   version "0.5.7"
   resolved "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.7.tgz"
@@ -4990,6 +4985,11 @@ react-hook-form@^7.48.2:
   resolved "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.48.2.tgz"
   integrity sha512-H0T2InFQb1hX7qKtDIZmvpU1Xfn/bdahWBN1fH19gSe4bBEqTfmlr7H3XWTaVtiK4/tpPaI1F3355GPMZYge+A==
 
+react-icons@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.0.1.tgz#1694e11bfa2a2888cab47dcc30154ce90485feee"
+  integrity sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"