trafficlunar/tomodachi-share
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: profile overview and logout button

Browse source
This commit is contained in:
trafficlunar 2025-03-28 22:58:43 +00:00
parent 0e8a4da103
commit dbe1d2417c
4 changed files with 52 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/missing.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 122 B

28
src/app/components/header.tsx
View file

@ -1,9 +1,14 @@
import Link from "next/link"; import Link from "next/link";
import SearchBar from "./search-bar"; import { getServerSession } from "next-auth";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
export default function Header() { import SearchBar from "./search-bar";
import ProfileOverview from "./profile-overview";
import LogoutButton from "./logout-button";
export default async function Header() {
const session = await getServerSession();
return ( return (
<div className="fixed top-0 w-full p-4 flex justify-between items-center bg-amber-50 border-b-4 border-amber-200 shadow-md"> <div className="fixed top-0 w-full p-4 flex justify-between items-center bg-amber-50 border-b-4 border-amber-200 shadow-md">
<Link href={"/"} className="font-black text-3xl tracking-wide text-orange-400"> <Link href={"/"} className="font-black text-3xl tracking-wide text-orange-400">
@ -12,22 +17,29 @@ export default function Header() {
<SearchBar /> <SearchBar />
<ul className="flex gap-3 items-center"> <ul className="flex gap-3 items-center h-11 *:h-full">
<li> <li title="Random Mii">
<Link href={"/random"} className="button !p-1.5"> <Link href={"/random"} className="button !p-0 h-full aspect-square">
<Icon icon="mdi:dice-3" fontSize={28} /> <Icon icon="mdi:dice-3" fontSize={28} />
</Link> </Link>
</li> </li>
<li> <li>
<Link href={"/submit"} className="button"> <Link href={"/submit"} className="button h-full">
Submit Submit
</Link> </Link>
</li> </li>
{!session?.user ? (
<li> <li>
<Link href={"/login"} className="button"> <Link href={"/login"} className="button h-full">
Login Login
</Link> </Link>
</li> </li>
) : (
<>
<ProfileOverview />
<LogoutButton />
</>
)}
</ul> </ul>
</div> </div>
); );

14
src/app/components/logout-button.tsx Normal file
View file

@ -0,0 +1,14 @@
"use client";
import { Icon } from "@iconify/react";
import { signOut } from "next-auth/react";
export default function LogoutButton() {
return (
<li title="Logout">
<button onClick={() => signOut()} className="button !p-0 aspect-square h-full">
<Icon icon="ic:round-logout" fontSize={24} />
</button>
</li>
);
}

14
src/app/components/profile-overview.tsx Normal file
View file

@ -0,0 +1,14 @@
import { getServerSession } from "next-auth";
export default async function ProfileOverview() {
const session = await getServerSession();
return (
<li title="Your profile">
<button className="button !gap-2 !p-0 h-full max-w-64">
<img src={session?.user?.image ?? "/missing.webp"} alt="profile picture" className="rounded-full h-full outline-2 outline-orange-400" />
<span className="pr-4 overflow-hidden whitespace-nowrap text-ellipsis w-full">{session?.user?.name}</span>
</button>
</li>
);
}