count0/HabitGrid
1
0
Fork 0
mirror of https://github.com/nagaoo0/HabbitGrid.git synced 2026-01-12 07:54:53 +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

33
src/components/MiniGrid.jsx
View File

@@ -13,6 +13,30 @@ function lightenColor(hex, percent) {
return `rgb(${r},${g},${b})`;
}
import { Flame } from 'lucide-react';
// Helpers to get custom icons from localStorage or fallback
function getStreakIcon() {
if (typeof window === 'undefined') return (
<span className="flex items-center justify-center w-full h-full">
<Flame className="w-4 h-4 drop-shadow-lg" />
</span>
);
const icon = localStorage.getItem('streakIcon');
if (!icon || icon === 'flame') return (
<span className="flex items-center justify-center w-full h-full">
<Flame className="w-4 h-4 drop-shadow-lg" />
</span>
);
return (
<span className="flex items-center justify-center w-full h-full">
<span className="text-lg" role="img" aria-label="Streak Icon">{icon}</span>
</span>
);
}
function getFreezeIcon() {
if (typeof window === 'undefined') return '❄️';
const icon = localStorage.getItem('freezeIcon');
return icon || '❄️';
}
import { motion } from 'framer-motion';
import { getColorIntensity, isToday, formatDate } from '../lib/utils-habit';
import { getFrozenDays } from '../lib/utils-habit';
@@ -122,7 +146,7 @@ const MiniGrid = ({ habit, onUpdate }) => {
}}
transition={{ duration: 0.7, ease: 'easeInOut' }}
>
❄️
{getFreezeIcon()}
</motion.span>
)}
{/* Flame icon for full streak days */}
@@ -147,6 +171,7 @@ const MiniGrid = ({ habit, onUpdate }) => {
whileTap={{ scale: 1.2, rotate: 0 }}
>
<motion.div
className="flex items-center justify-center w-full h-full"
animate={{ rotate: [0, 12, -12, 0] }}
transition={{
repeat: Infinity,
@@ -154,12 +179,8 @@ const MiniGrid = ({ habit, onUpdate }) => {
duration: 2,
ease: 'easeInOut',
}}
style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }}
>
<Flame
className="w-3 h-3 sm:w-4 sm:h-4 md:w-5 md:h-5 drop-shadow-lg"
style={{ color: lightenColor(habit.color, 0.4), filter: 'brightness(1.3) drop-shadow(0 0 6px white)' }}
/>
{getStreakIcon()}
</motion.div>
</motion.span>
)}