125 lines
3.9 KiB
TypeScript
125 lines
3.9 KiB
TypeScript
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>
|
|
)
|
|
}
|