ManInDark/HabitTrove
1
0
Fork 0
mirror of https://github.com/ManInDark/HabitTrove.git synced 2026-01-21 06:34:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

Added profile button (#21)

Browse Source
This commit is contained in:
Doh
2025-01-04 14:10:28 -05:00
committed by GitHub
parent f04a5e484c
commit fadf33e8df
12 changed files with 725 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
components/Header.tsx
View File

@@ -1,6 +1,19 @@
import { Bell, Settings } from 'lucide-react'
'use client'
import { useState } from 'react'
import { useAtom } from 'jotai'
import { settingsAtom } from '@/lib/atoms'
import { Bell, Menu, Settings, User, Info } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Logo } from '@/components/Logo'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import AboutModal from './AboutModal'
import Link from 'next/link'
interface HeaderProps {
@@ -8,27 +21,60 @@ interface HeaderProps {
}
export default function Header({ className }: HeaderProps) {
const [showAbout, setShowAbout] = useState(false)
const [settings] = useAtom(settingsAtom)
return (
<header className={`border-b bg-white dark:bg-gray-800 shadow-sm ${className || ''}`}>
<div className="mx-auto py-4 px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between">
<Logo />
<div className="flex items-center">
{/* <Button variant="ghost" size="icon" className="mr-2"> */}
{/* <Bell className="h-5 w-5" /> */}
{/* </Button> */}
<Link
href="/settings"
aria-label='settings'
>
<Button variant="ghost" size="icon">
<Settings className="h-5 w-5" />
</Button>
<>
<header className={`border-b bg-white dark:bg-gray-800 shadow-sm ${className || ''}`}>
<div className="mx-auto py-4 px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between">
<Link href="/">
<Logo />
</Link>
<div className="flex items-center gap-2">
<Button variant="ghost" size="icon" aria-label="Notifications">
<Bell className="h-5 w-5" />
</Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="flex items-center gap-2">
{/* <Menu className="h-5 w-5" /> */}
<Avatar className="h-8 w-8">
<AvatarImage src={settings?.profile?.avatarPath ? `/api/avatars/${settings.profile.avatarPath.split('/').pop()}` : '/avatars/default.png'} />
<AvatarFallback>
<User className="h-4 w-4" />
</AvatarFallback>
</Avatar>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-56 p-2">
<DropdownMenuItem className="cursor-pointer px-3 py-2" asChild>
<Link
href="/settings"
aria-label='settings'
className="flex items-center w-full gap-2"
>
<Settings className="h-4 w-4" />
<span>Settings</span>
</Link>
</DropdownMenuItem>
<DropdownMenuItem className="cursor-pointer px-3 py-2" asChild>
<button
onClick={() => setShowAbout(true)}
className="flex items-center w-full gap-2"
>
<Info className="h-4 w-4" />
<span>About</span>
</button>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
</div>
</div>
</header >
</header>
<AboutModal isOpen={showAbout} onClose={() => setShowAbout(false)} />
</>
)
}