🌈🦥 ↝ Adding new card, layout, and wrapper for API + notebook integrat…

…ion for #26 & Signal-K/sytizen#16

components/Core/Layout.jsx

@@ -0,0 +1,55 @@
+import React, { useState, useEffect, Fragment } from "react";
+import { Transition } from "@headlessui/react";
+import CoreNavigation from "./Navigation";
+import CoreSidebar from './Sidebar';
+
+export default function CoreLayout ( { children } ) {
+    // Handling responsive UI
+    const [showNav, setShowNav] = useState(true);
+    const [isMobile, setIsMobile] = useState(false);
+
+    function handleResize () {
+        if (innerWidth <= 640) {
+            setShowNav(false);
+            setIsMobile(true);
+        } else {
+            setShowNav(true)
+            setIsMobile(false);
+        }
+    }
+
+    useEffect(() => {
+        if (typeof window != undefined) {
+            addEventListener("resize", handleResize);
+        }
+
+        return () => {
+            removeEventListener("resize", handleResize);
+        }
+    }, []);
+
+    return (
+        <>
+            <CoreNavigation setShowNav={setShowNav} showNav={showNav} />
+            <Transition
+                as={Fragment}
+                show={showNav}
+                enter="transform transition duration-[400ms]"
+                enterFrom="-translate-x-full"
+                enterTo="translate-x-0"
+                leave="transform duration-[400ms] transition ease-in-out"
+                leaveFrom="translate-x-0"
+                leaveTo="-translate-x-full"
+            >
+                <CoreSidebar showNav={showNav} />
+            </Transition>
+            <main
+                className={`pt-16 transition-all duration-[400ms] ${
+                    showNav && !isMobile ? "pl-56" : ""
+                }`}
+            >
+                <div className="px-4 md:px-16">{children}</div>
+            </main>
+        </>
+    );
+};

components/Core/Navigation.tsx

@@ -0,0 +1,207 @@
+import { Fragment, forwardRef, useState, useEffect } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import {
+    Bars3CenterLeftIcon,
+    PencilIcon,
+    ChevronDownIcon,
+    CreditCardIcon,
+    UserIcon,
+    HomeIcon,
+    Cog8ToothIcon,
+} from "@heroicons/react/24/solid";
+import { BellIcon, CheckIcon } from "@heroicons/react/24/outline";
+import { Menu, Transition, Popover } from "@headlessui/react";
+
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+
+export default function CoreNavigation ({ showNav, setShowNav }) {
+    const session = useSession();
+    const supabase = useSupabaseClient();
+
+    const [loading, setLoading] = useState(false);
+    const [username, setUsername] = useState(null);
+    const [avatar_url, setAvatarUrl] = useState(null);
+
+    useEffect(() => {
+        getProfile();
+    }, [session]);
+
+    async function getProfile () {
+        try {
+            setLoading(true);
+            if (!session) throw new Error('No user authenticated');
+            let { data, error, status } = await supabase
+                .from('profiles')
+                .select(`username, avatar_url`)
+                .eq('id', session?.user?.id)
+                .single()
+
+            if (error && status !== 406) { throw error; };
+            if ( data ) {
+                setUsername(data.username);
+                setAvatarUrl(data.avatar_url);
+            }
+        } catch (error) {
+            alert('Error loading your user data');
+            console.log(error);
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    return (
+        <div
+            className={`fixed w-full h-16 flex justify-between items-center transition-all duration-[400ms] ${
+                showNav ? "pl-56" : ""
+            }`}
+        >
+            <div className="pl-4 md:pl-16">
+                <Bars3CenterLeftIcon
+                    className="h-8 w-8 text-gray-700 cursor-pointer"
+                    onClick={() => setShowNav(!showNav)}
+                />
+            </div>
+            <div className="flex items-center pr-4 md:pr-16">
+                <Popover className="relative">
+                    <Popover.Button className="outline-none mr-5 md:mr-8 cursor-pointer text-gray-700">
+                        <BellIcon className="h-6 w-6" />
+                    </Popover.Button>
+                    <Transition
+                        as={Fragment}
+                        enter="transition ease-out duration-100"
+                        enterFrom="transform scale-95"
+                        enterTo="transform scale-100"
+                        leave="transition ease-in duration=75"
+                        leaveFrom="transform scale-100"
+                        leaveTo="transform scale-95"
+                    >
+                        <Popover.Panel className="absolute -right-16 sm:right-4 z-50 mt-2 bg-white shadow-sm rounded max-w-xs sm:max-w-sm w-screen">
+                            <div className="relative p-3">
+                                <div className="flex justify-between items-center w-full">
+                                <p className="text-gray-700 font-medium">Notifications</p>
+                      <a className="text-sm text-orange-500" href="#">
+                        Mark all as read
+                      </a>
+                    </div>
+                    <div className="mt-4 grid gap-4 grid-cols-1 overflow-hidden">
+                      <div className="flex">
+                        <div className="rounded-full shrink-0 bg-green-200 h-8 w-8 flex items-center justify-center">
+                          <CheckIcon className="h-4 w-4 text-green-600" />
+                        </div>
+                        <div className="ml-4">
+                          <p className="font-medium text-gray-700">
+                            Notification Title
+                          </p>
+                          <p className="text-sm text-gray-500 truncate">
+                            Test Notification text for design
+                          </p>
+                        </div>
+                      </div>
+                      <div className="flex">
+                        <div className="rounded-full shrink-0 bg-green-200 h-8 w-8 flex items-center justify-center">
+                          <CheckIcon className="h-4 w-4 text-green-600" />
+                        </div>
+                        <div className="ml-4">
+                          <p className="font-medium text-gray-700">
+                            Notification Title
+                          </p>
+                          <p className="text-sm text-gray-500 truncate">
+                            Test Notification text for design
+                          </p>
+                        </div>
+                      </div>
+                      <div className="flex">
+                        <div className="rounded-full shrink-0 bg-green-200 h-8 w-8 flex items-center justify-center">
+                          <CheckIcon className="h-4 w-4 text-green-600" />
+                        </div>
+                        <div className="ml-4">
+                          <p className="font-medium text-gray-700">
+                            Notification Title
+                          </p>
+                          <p className="text-sm text-gray-500 truncate">
+                            Test Notification text for design
+                          </p>
+                        </div>
+                      </div>
+                      <div className="flex">
+                        <div className="rounded-full shrink-0 bg-green-200 h-8 w-8 flex items-center justify-center">
+                          <CheckIcon className="h-4 w-4 text-green-600" />
+                        </div>
+                        <div className="ml-4">
+                          <p className="font-medium text-gray-700">
+                            Notification Title
+                          </p>
+                          <p className="text-sm text-gray-500 truncate">
+                            Test Notification text for design
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </Popover.Panel>
+              </Transition>
+            </Popover>
+            <Menu as="div" className="relative inline-block text-left">
+              <div>
+                <Menu.Button className="inline-flex w-full justify-center items-center">
+                  <picture>
+                    <img
+                        src="https://user-images.githubusercontent.com/31812229/222339335-ae57fdb9-6fbd-4d26-9225-a18c02b6edeb.png"
+                      //src={avatar_url}
+                        className="rounded-full h-8 md:mr-4 border-2 border-white shadow-sm"
+                        alt="profile picture"
+                    />
+                  </picture>
+                  <span className="hidden md:block font-medium text-gray-700">
+                    {username}
+                  </span>
+                  <ChevronDownIcon className="ml-2 h-4 w-4 text-gray-700" />
+                </Menu.Button>
+              </div>
+              <Transition
+                as={Fragment}
+                enter="transition ease-out duration-100"
+                enterFrom="transform scale-95"
+                enterTo="transform scale-100"
+                leave="transition ease-in duration=75"
+                leaveFrom="transform scale-100"
+                leaveTo="transform scale-95"
+              >
+                <Menu.Items className="absolute right-0 w-56 z-50 mt-2 origin-top-right bg-white rounded shadow-sm">
+                  <div className="p-1">
+                    <Menu.Item>
+                      <Link
+                        href="#"
+                        className="flex hover:bg-orange-500 hover:text-white text-gray-700 rounded p-2 text-sm group transition-colors items-center"
+                      >
+                        <PencilIcon className="h-4 w-4 mr-2" />
+                        Edit
+                      </Link>
+                    </Menu.Item>
+                    <Menu.Item>
+                      <Link
+                        href="#"
+                        className="flex hover:bg-orange-500 hover:text-white text-gray-700 rounded p-2 text-sm group transition-colors items-center"
+                      >
+                        <CreditCardIcon className="h-4 w-4 mr-2" />
+                        ORCID
+                      </Link>
+                    </Menu.Item>
+                    <Menu.Item>
+                                    <Link
+                                        href="#"
+                                        className="flex hover:bg-orange-500 hover:text-white text-gray-700 rounded p-2 text-sm group transition-colors items-center"
+                                    >
+                                        <Cog8ToothIcon className="h-4 w-4 mr-2" />
+                                        Settings
+                                    </Link>
+                                </Menu.Item>
+                            </div>
+                        </Menu.Items>
+                    </Transition>
+                </Menu>
+            </div>
+        </div>
+    );
+}

components/Core/Sidebar.jsx

@@ -0,0 +1,109 @@
+import { forwardRef } from "react";
+import Link from "next/link";
+import { HomeIcon, CreditCardIcon, UserIcon, RocketLaunchIcon, MagnifyingGlassCircleIcon } from "@heroicons/react/24/solid";
+import { useRouter } from "next/router";
+
+const CoreSidebar = forwardRef(({ showNav }, ref) => {
+    const router = useRouter();
+
+    return (
+      <div ref={ref} className="fixed w-56 h-full bg-white shadow-sm">
+        <div className="flex justify-center mt-6 mb-14">
+          <picture>
+            <img
+              className="w-32 h-auto"
+              src="https://user-images.githubusercontent.com/31812229/222339335-ae57fdb9-6fbd-4d26-9225-a18c02b6edeb.png"
+              alt="company logo"
+            />
+          </picture>
+        </div>
+
+        <div className="flex flex-col">
+          <Link href="/">
+            <div
+              className={`pl-6 py-3 mx-5 rounded text-center cursor-pointer mb-3 flex items-center transition-colors ${
+                router.pathname == "/"
+                  ? "bg-green-100 text-green-500"
+                  : "text-gray-400 hover:bg-green-100 hover:text-green-500"
+              }`}
+            >
+              <div className="mr-2">
+                <HomeIcon className="h-5 w-5" />
+              </div>
+              <div>
+                <p>Home</p>
+              </div>
+            </div>
+          </Link>
+          <Link href="/posts">
+            <div
+              className={`pl-6 py-3 mx-5 rounded text-center cursor-pointer mb-3 flex items-center transition-colors ${
+                router.pathname == "/posts"
+                  ? "bg-green-100 text-green-500"
+                  : "text-gray-400 hover:bg-green-100 hover:text-green-500"
+              }`}
+            >
+              <div className="mr-2">
+                <UserIcon className="h-5 w-5" />
+              </div>
+              <div>
+                <p>Feed</p>
+              </div>
+            </div>
+          </Link>
+          <Link href="/billing">
+            <div
+              className={`pl-6 py-3 mx-5 rounded text-center cursor-pointer mb-3 flex items-center transition-colors ${
+                router.pathname == "/billing"
+                  ? "bg-green-100 text-green-500"
+                  : "text-gray-400 hover:bg-green-100 hover:text-green-500"
+              }`}
+            >
+              <div className="mr-2">
+                <CreditCardIcon className="h-5 w-5" />
+              </div>
+              <div>
+                <p>ORCID</p>
+              </div>
+            </div>
+          </Link>
+          <Link href="/ships">
+            <div
+              className={`pl-6 py-3 mx-5 rounded text-center cursor-pointer mb-3 flex items-center transition-colors ${
+                router.pathname == "/ships"
+                  ? "bg-green-100 text-green-500"
+                  : "text-gray-400 hover:bg-green-100 hover:text-green-500"
+              }`}
+            >
+              <div className="mr-2">
+                <RocketLaunchIcon className="h-5 w-5" />
+              </div>
+              <div>
+                <p>Shipyard</p>
+              </div>
+            </div>
+          </Link>
+          <Link href="/posts/lens/parselay.lens">
+            <div
+              className={`pl-6 py-3 mx-5 rounded text-center cursor-pointer mb-3 flex items-center transition-colors ${
+                router.pathname == "/posts/lens/parselay.lens"
+                  ? "bg-green-100 text-green-500"
+                  : "text-gray-400 hover:bg-green-100 hover:text-green-500"
+              }`}
+            >
+              <div className="mr-2">
+                <MagnifyingGlassCircleIcon className="h-5 w-5" />
+              </div>
+              <div>
+                <p>Lens</p>
+              </div>
+            </div>
+          </Link>
+        </div>
+      </div>
+    );
+  });
+
+CoreSidebar.displayName = "SideBar";
+
+export default CoreSidebar;

components/Generator/Notebooks/Notebook.js

@@ -0,0 +1,10 @@
+import { JupyterNotebookViewer } from 'react-jupyter-notebook-viewer';
+
+export default function Notebook ( props ) {
+    const notebook = new JupyterNotebookViewer ( props );
+    return ( 
+        <>
+            { notebook }
+        </>
+    );
+}