count0/HabitGrid
1
0
Fork 0
mirror of https://github.com/nagaoo0/HabbitGrid.git synced 2026-04-19 15:23:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add Icon Options

Browse Source
This commit is contained in:
_count0
2025-10-17 16:30:48 +02:00
parent 28cedf9421
commit 217ec8b15a
4 changed files with 132 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/HabitCard.jsx
View File

@@ -6,6 +6,14 @@ import { Button } from './ui/button';
import MiniGrid from './MiniGrid';
import AnimatedCounter from './AnimatedCounter';
// Helper to get streak icon from localStorage or fallback
function getStreakIcon() {
const icon = typeof window !== 'undefined' ? localStorage.getItem('streakIcon') : null;
if (!icon || icon === 'flame') return <Flame className="w-4 h-4 text-orange-500" />;
return <span className="w-4 h-4 text-lg align-text-bottom" role="img" aria-label="Streak Icon">{icon}</span>;
}
const HabitCard = ({ habit, onUpdate }) => {
const navigate = useNavigate();
@@ -27,11 +35,11 @@ const HabitCard = ({ habit, onUpdate }) => {
</div>
<div className="flex items-center gap-4 text-sm text-muted-foreground">
<div className="flex items-center gap-1">
<Flame className="w-4 h-4 text-orange-500" />
<span><AnimatedCounter value={habit.currentStreak || 0} duration={800} /> day streak</span>
{getStreakIcon()}
<span><AnimatedCounter value={habit.currentStreak || 0} duration={800} /> day streak</span>
</div>
<span>•</span>
<span>Personal Record: <AnimatedCounter value={habit.longestStreak || 0} duration={800} /> days</span>
<span>Personal Record: <AnimatedCounter value={habit.longestStreak || 0} duration={800} /> days</span>
</div>
</div>
<Button