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

show today earned coins

Browse Source
This commit is contained in:
dohsimpson
2025-01-08 14:44:40 -05:00
parent bc5fa5c71f
commit e9dff5b4e1
6 changed files with 148 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
components/Header.tsx
View File

@@ -2,7 +2,8 @@
import { useState } from 'react'
import { useAtom } from 'jotai'
import { settingsAtom, coinsAtom } from '@/lib/atoms'
import { settingsAtom } from '@/lib/atoms'
import { useCoins } from '@/hooks/useCoins'
import { Bell, Menu, Settings, User, Info, Coins } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Logo } from '@/components/Logo'
@@ -23,7 +24,7 @@ interface HeaderProps {
export default function Header({ className }: HeaderProps) {
const [showAbout, setShowAbout] = useState(false)
const [settings] = useAtom(settingsAtom)
const [coins] = useAtom(coinsAtom)
const { balance, coinsEarnedToday } = useCoins()
return (
<>
<header className={`border-b bg-white dark:bg-gray-800 shadow-sm ${className || ''}`}>
@@ -33,11 +34,18 @@ export default function Header({ className }: HeaderProps) {
<Logo />
</Link>
<div className="flex items-center gap-2">
<Link href="/coins" className="flex items-center gap-1 px-2 py-1 bg-amber-100 hover:bg-amber-200 dark:bg-amber-900 dark:hover:bg-amber-800 rounded-full transition-colors">
<Coins className="text-amber-500 dark:text-amber-300" />
<span className="text-amber-600 dark:text-amber-400 font-medium">
{coins.balance}
</span>
<Link href="/coins" className="flex items-center gap-2 px-3 py-1.5 bg-white hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-full transition-colors border border-gray-200 dark:border-gray-600">
<Coins className="h-5 w-5 text-yellow-500 dark:text-yellow-400" />
<div className="flex items-baseline gap-2">
<span className="text-gray-800 dark:text-gray-100 font-medium text-lg">
{balance}
</span>
{coinsEarnedToday > 0 && (
<span className="text-sm bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-400 px-2 py-1 rounded-full border border-green-100 dark:border-green-800">
+{coinsEarnedToday}
</span>
)}
</div>
</Link>
<Button variant="ghost" size="icon" aria-label="Notifications">
<Bell className="h-5 w-5" />