AppCakes
48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { IonProgressBar } from '@ionic/react';
|
|
|
|
interface StatsHabitCardProps {
|
|
name: string;
|
|
color: string;
|
|
completedCount: number;
|
|
totalDays: number;
|
|
streak: number;
|
|
}
|
|
|
|
const StatsHabitCard: React.FC<StatsHabitCardProps> = ({
|
|
name,
|
|
color,
|
|
completedCount,
|
|
totalDays,
|
|
streak,
|
|
}) => {
|
|
const ratio = totalDays > 0 ? completedCount / totalDays : 0;
|
|
const percentage = Math.round(ratio * 100);
|
|
|
|
return (
|
|
<div className="stats-card">
|
|
<div className="stats-card-header">
|
|
<div>
|
|
<h3>{name}</h3>
|
|
<p>
|
|
{completedCount} of {totalDays} days completed
|
|
</p>
|
|
</div>
|
|
<div className="stats-streak-badge" style={{ color }}>
|
|
{streak}🔥
|
|
</div>
|
|
</div>
|
|
<IonProgressBar
|
|
value={ratio}
|
|
style={{ '--progress-background': color } as React.CSSProperties}
|
|
/>
|
|
<div className="stats-card-footer">
|
|
<span>{percentage}% consistency</span>
|
|
<span>Current streak {streak}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StatsHabitCard;
|