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

dark mode

Browse Source
This commit is contained in:
dohsimpson
2025-01-25 13:03:07 -05:00
parent 6fe10d9fa5
commit c66e28162c
10 changed files with 246 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
components/Header.tsx
View File

@@ -18,6 +18,7 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import AboutModal from './AboutModal'
import Link from 'next/link'
import dynamic from 'next/dynamic'
import { Profile } from './Profile'
interface HeaderProps {
className?: string
@@ -26,7 +27,6 @@ interface HeaderProps {
const TodayEarnedCoins = dynamic(() => import('./TodayEarnedCoins'), { ssr: false })
export default function Header({ className }: HeaderProps) {
const [showAbout, setShowAbout] = useState(false)
const [settings] = useAtom(settingsAtom)
const [coins] = useAtom(coinsAtom)
const [browserSettings] = useAtom(browserSettingsAtom)
@@ -56,45 +56,11 @@ export default function Header({ className }: HeaderProps) {
<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>
<Profile />
</div>
</div>
</div>
</header>
<AboutModal isOpen={showAbout} onClose={() => setShowAbout(false)} />
</>
)
}