initial commit - code moved to separate repo

components/header.tsx

@@ -0,0 +1,124 @@
+import Link from "next/link"
+import { signIn, signOut, useSession } from "next-auth/react"
+import styles from "../styles/header.module.css"
+
+// The approach used in this component shows how to build a sign in and sign out
+// component that works on pages which support both client and server side
+// rendering, and avoids any flash incorrect content on initial page load.
+export default function Header() {
+  const { data: session, status } = useSession()
+  const loading = status === "loading"
+
+//generate top header with sign in/out button and dropdown menu and user name/surname using tailwindcss
+
+
+
+
+  return (
+    <header className="">
+      <noscript>
+        <style>{`.nojs-show { opacity: 1; top: 0; }`}</style>
+      </noscript>
+      {/* <script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js"></script> */}
+      <div className={styles.signedInStatus}>
+        <p
+          className={`nojs-show ${
+            !session && loading ? styles.loading : styles.loaded
+          }`}
+        >
+          {!session && (
+            <>
+              <span className={styles.notSignedInText}>
+                You are not signed in
+              </span>
+              <a
+                href={`/api/auth/signin`}
+                className={styles.buttonPrimary}
+                onClick={(e) => {
+                  e.preventDefault()
+                  signIn()
+                }}
+              >
+                Sign in
+              </a>
+            </>
+          )}
+          {session?.user && (
+            <>
+              {session.user.image && (
+                <span
+                  style={{ backgroundImage: `url('${session.user.image}')` }}
+                  className={styles.avatar}
+                />
+              )}
+              <span className={styles.signedInText}>
+                <small>Signed in as</small>
+                <br />
+                <strong>{session.user.email ?? session.user.name}</strong>
+              </span>
+              <a
+                href={`/api/auth/signout`}
+                className={styles.button}
+                onClick={(e) => {
+                  e.preventDefault()
+                  signOut()
+                }}
+              >
+                Sign out
+              </a>
+            </>
+          )}
+        </p>
+      </div>
+      <nav className="max-w-7xl mx-auto ">
+        <ul className={styles.navItems}>
+          <li className={styles.navItem}>
+            <Link href="/">Home</Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href="/client">Client</Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href="/server">Server</Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href="/protected">Protected</Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href="/api-example">API</Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href="/admin">Admin</Link>
+          </li>
+          <li className={styles.navItem}>
+            <Link href="/me">Me</Link>
+          </li>         
+           <li className={styles.navItem}>
+                   CART
+          {/* cart submenus */}
+          <ul className={styles.submenu}>
+            <li className={styles.submenuItem}>
+              <Link href="/cart/locations">Locations</Link>
+            </li>
+            <li className={styles.submenuItem}>
+              <Link href="/cart/publishers">Publishers</Link>
+            </li>
+            <li className={styles.submenuItem}>
+              <Link href="/cart/availabilities">Availabilities</Link>
+            </li>
+            <li className={styles.submenuItem}>
+              <Link href="/cart/cartevents">Cart Event</Link>
+            </li>
+          </ul>
+
+          </li>
+          {/* end cart submenus */}
+
+          <li className={styles.navItem}>
+            <Link href="/cart/calendar">Calendar</Link>
+          </li>
+        </ul>
+      </nav>
+    </header>
+  )
+}