saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-05-24 02:42:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Dynamic login/logout button using next-auth

Browse Source
This commit is contained in:
austinkelsay 2024-01-01 17:49:09 -06:00
parent a39e73ab2e
commit d0477edf16
1 changed files with 37 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/navbar/Navbar.js
View File

@ -2,20 +2,33 @@ import React from 'react';
import Image from 'next/image'; import Image from 'next/image';
import { Button } from 'primereact/button'; import { Button } from 'primereact/button';
import { Menubar } from 'primereact/menubar'; import { Menubar } from 'primereact/menubar';
import 'primereact/resources/primereact.min.css'; // core css import { useSession, signIn, signOut } from 'next-auth/react';
import 'primeicons/primeicons.css'; // icons import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';
import styles from './navbar.module.css'; import styles from './navbar.module.css';
const end = ( const Navbar = () => {
const { data: session } = useSession();
const handleAuthClick = () => {
if (session) {
signOut();
} else {
signIn();
}
};
const end = (
<Button <Button
label="Login" label={session ? "Logout" : "Login"}
icon="pi pi-user" icon="pi pi-user"
className="text-[#f8f8ff]" className="text-[#f8f8ff]"
rounded rounded
onClick={handleAuthClick}
/> />
); );
const start = ( const start = (
<div className={styles.titleContainer}> <div className={styles.titleContainer}>
<Image <Image
alt="logo" alt="logo"
@ -26,9 +39,8 @@ const start = (
/> />
<h1 className={styles.title}>PlebDevs</h1> <h1 className={styles.title}>PlebDevs</h1>
</div> </div>
); );
const Navbar = () => {
return ( return (
<Menubar start={start} end={end} className='px-[5%]' /> <Menubar start={start} end={end} className='px-[5%]' />
); );