feat: integrate emoji-mart and refactor emoji usage
- Added @emoji-mart/data and @emoji-mart/react dependencies for enhanced emoji support. - Replaced static emoji characters with Emoji component in various UI components for consistency and improved rendering. - Updated generateDateTitle function to return an object with emoji and text for better structure. - Marked the task for removing emojis from the UI as complete in TODO.md.
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { DailyMetrics } from '@/services/analytics/metrics';
|
||||
import { Emoji } from '@/components/ui/Emoji';
|
||||
|
||||
interface ProductivityInsightsProps {
|
||||
data: DailyMetrics[];
|
||||
@@ -46,24 +47,24 @@ export function ProductivityInsights({ data, className }: ProductivityInsightsPr
|
||||
|
||||
const getTrendIcon = () => {
|
||||
switch (trend) {
|
||||
case 'up': return { icon: '📈', color: 'text-green-600', label: 'En amélioration' };
|
||||
case 'down': return { icon: '📉', color: 'text-red-600', label: 'En baisse' };
|
||||
default: return { icon: '➡️', color: 'text-blue-600', label: 'Stable' };
|
||||
case 'up': return { icon: <Emoji emoji="📈" size={24} />, color: 'text-green-600', label: 'En amélioration' };
|
||||
case 'down': return { icon: <Emoji emoji="📉" size={24} />, color: 'text-red-600', label: 'En baisse' };
|
||||
default: return { icon: <Emoji emoji="➡️" size={24} />, color: 'text-blue-600', label: 'Stable' };
|
||||
}
|
||||
};
|
||||
|
||||
const getConsistencyLevel = () => {
|
||||
if (consistencyScore >= 80) return { label: 'Très régulier', color: 'text-green-600', icon: '🎯' };
|
||||
if (consistencyScore >= 60) return { label: 'Assez régulier', color: 'text-blue-600', icon: '📊' };
|
||||
if (consistencyScore >= 40) return { label: 'Variable', color: 'text-yellow-600', icon: '📊' };
|
||||
return { label: 'Très variable', color: 'text-red-600', icon: '📊' };
|
||||
if (consistencyScore >= 80) return { label: 'Très régulier', color: 'text-green-600', icon: <Emoji emoji="🎯" size={24} /> };
|
||||
if (consistencyScore >= 60) return { label: 'Assez régulier', color: 'text-blue-600', icon: <Emoji emoji="📊" size={24} /> };
|
||||
if (consistencyScore >= 40) return { label: 'Variable', color: 'text-yellow-600', icon: <Emoji emoji="📊" size={24} /> };
|
||||
return { label: 'Très variable', color: 'text-red-600', icon: <Emoji emoji="📊" size={24} /> };
|
||||
};
|
||||
|
||||
const getRatioStatus = () => {
|
||||
if (creationRatio >= 100) return { label: 'Équilibré+', color: 'text-green-600', icon: '⚖️' };
|
||||
if (creationRatio >= 80) return { label: 'Bien équilibré', color: 'text-blue-600', icon: '⚖️' };
|
||||
if (creationRatio >= 60) return { label: 'Légèrement en retard', color: 'text-yellow-600', icon: '⚖️' };
|
||||
return { label: 'Accumulation', color: 'text-red-600', icon: '⚖️' };
|
||||
if (creationRatio >= 100) return { label: 'Équilibré+', color: 'text-green-600', icon: <Emoji emoji="⚖️" size={24} /> };
|
||||
if (creationRatio >= 80) return { label: 'Bien équilibré', color: 'text-blue-600', icon: <Emoji emoji="⚖️" size={24} /> };
|
||||
if (creationRatio >= 60) return { label: 'Légèrement en retard', color: 'text-yellow-600', icon: <Emoji emoji="⚖️" size={24} /> };
|
||||
return { label: 'Accumulation', color: 'text-red-600', icon: <Emoji emoji="⚖️" size={24} /> };
|
||||
};
|
||||
|
||||
const trendInfo = getTrendIcon();
|
||||
@@ -79,7 +80,7 @@ export function ProductivityInsights({ data, className }: ProductivityInsightsPr
|
||||
<div className="outline-card-green p-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h4 className="font-medium">
|
||||
🏆 Jour champion
|
||||
<Emoji emoji="🏆" size={16} /> Jour champion
|
||||
</h4>
|
||||
<span className="text-2xl font-bold">
|
||||
{mostProductiveDay.completed}
|
||||
@@ -97,7 +98,7 @@ export function ProductivityInsights({ data, className }: ProductivityInsightsPr
|
||||
<div className="outline-card-blue p-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h4 className="font-medium">
|
||||
💡 Jour créatif
|
||||
<Emoji emoji="💡" size={16} /> Jour créatif
|
||||
</h4>
|
||||
<span className="text-2xl font-bold">
|
||||
{mostCreativeDay.newTasks}
|
||||
@@ -164,7 +165,7 @@ export function ProductivityInsights({ data, className }: ProductivityInsightsPr
|
||||
{/* Recommandations */}
|
||||
<div className="outline-card-yellow p-4">
|
||||
<h4 className="font-medium mb-2 flex items-center gap-2">
|
||||
💡 Recommandations
|
||||
<Emoji emoji="💡" size={16} /> Recommandations
|
||||
</h4>
|
||||
<div className="space-y-1 text-sm">
|
||||
{trend === 'down' && (
|
||||
|
||||
Reference in New Issue
Block a user