npease/ChatMaps
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Move Profile Panel to Profile Component Directory

Browse Source
This commit is contained in:
Nicholas Pease
2024-04-03 23:36:11 +00:00
parent 9feead28cd
commit 7bf163d77c
2 changed files with 50 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-next/src/components/app/header.js
+4 -40
View File
@@ -1,14 +1,9 @@
import { auth, database } from "../../../firebase-config";
import { database } from "../../../firebase-config";
import { ref, set, remove } from "firebase/database";
import { signOut } from "firebase/auth";
import { Popover } from "@headlessui/react";
import Link from "next/link"
import { NotificationPanel } from "./notifications/notifications";
function logout() {
signOut(auth);
}
import { ProfilePanel } from "./profile/ProfilePanel"
// Closes chat room
function closeChatRoom(roomObj, user) {
@@ -126,39 +121,8 @@ export function Header({
{/* Notifications Panel */}
<NotificationPanel user={user}/>
{/*"Profile Dropdown TODO: MOVE TO PROFILE IMPORT - req user, take logout function with"*/}
<Popover className="relative">
<Popover.Button as="div">
<div className="mr-5 h-[44px] p-[2px] pr-[15px] cursor-pointer bg-cyan-500 text-white font-bold rounded-full shadow-2xl flex">
<div className="flex items-center pl-1">{user.firstName}</div>
<div className="ml-3 rounded-lg">
<img
src={user.pfp}
width="40px"
className="relative mx-auto rounded-xl overflow-hidden"
/>
</div>
</div>
</Popover.Button>
<Popover.Panel className="absolute z-10 bg-white mt-[4px] rounded-xl ml-3 shadow-2xl">
<div className="grid grid-cols-1">
<Link
className="rounded-xl p-4 hover:bg-[#C0C0C0]"
href={"/user/" + user.uid}
>
View Profile
</Link>
<Link
className="rounded-xl p-4 hover:bg-[#C0C0C0]"
onClick={logout}
href="/"
>
Sign Out
</Link>
</div>
</Popover.Panel>
</Popover>
{/*Profile Dropdown */}
<ProfilePanel user={user}/>
</div>
</div>
);
frontend-next/src/components/app/profile/ProfilePanel.js
+46
View File
@@ -0,0 +1,46 @@
import { Popover } from "@headlessui/react";
import { auth } from "../../../../firebase-config";
import { signOut } from "firebase/auth";
import Link from "next/link"
function logout() {
signOut(auth);
}
export function ProfilePanel({user}) {
return (
<Popover className="relative">
<Popover.Button as="div">
<div className="mr-5 h-[44px] p-[2px] pr-[15px] cursor-pointer bg-cyan-500 text-white font-bold rounded-full shadow-2xl flex">
<div className="flex items-center pl-1">{user.firstName}</div>
<div className="ml-3 rounded-lg">
<img
src={user.pfp}
width="40px"
className="relative mx-auto rounded-xl overflow-hidden"
/>
</div>
</div>
</Popover.Button>
<Popover.Panel className="absolute z-10 bg-white mt-[4px] rounded-xl ml-3 shadow-2xl">
<div className="grid grid-cols-1">
<Link
className="rounded-xl p-4 hover:bg-[#C0C0C0]"
href={"/user/" + user.uid}
>
View Profile
</Link>
<Link
className="rounded-xl p-4 hover:bg-[#C0C0C0]"
onClick={logout}
href="/"
>
Sign Out
</Link>
</div>
</Popover.Panel>
</Popover>
)
}