import React, { useState, useRef, useEffect, useMemo } from "react"; import dayjs from "dayjs"; const MOODS = [ { key: "amazing", label: "Amazing", icon: "😄", color: "bg-rose-200", }, { key: "happy", label: "Happy", icon: "😀", color: "bg-yellow-200", }, { key: "meh", label: "Meh", icon: "😐", color: "bg-gray-200", }, { key: "sad", label: "Sad", icon: "😢", color: "bg-blue-200", }, { key: "stressed", label: "Stressed", icon: "😰", color: "bg-indigo-200", }, { key: "angry", label: "Angry", icon: "😠", color: "bg-red-200", }, ]; // Moods considered as low const LOW_MOODS = ["sad", "stressed", "angry"]; const SUGGESTIONS = [ { title: "Take a Deep Breath", text: "Pause for a few moments and focus on your breath. Even one minute can make a difference.", emoji: "🧘‍♂️", }, { title: "Go for a Walk", text: "A short walk—even just around your room—can help reset your mood.", emoji: "🚶‍♀️", }, { title: "Gratitude Note", text: "List one thing you’re grateful for today—even a small thing counts!", emoji: "💌", }, { title: "Hydrate", text: "Have a glass of water. Hydration often helps to refresh both body and mind.", emoji: "💧", }, { title: "Reach Out", text: "Message a friend, call a family member, or pet an animal for some support.", emoji: "🤗", }, { title: "Listen to Music", text: "Put on a favorite upbeat song for a quick mood lift.", emoji: "🎵", }, ]; function getMoodObj(key) { return MOODS.find((m) => m.key === key); } export default function App() { const [moodsByDate, setMoodsByDate] = useSharedStorage("moodsByDate", {}); // { '2026-02-27': { mood: "happy", note: "Ate pancakes" } } const [note, setNote] = useState(""); const [selectedMood, setSelectedMood] = useState(null); const today = dayjs().format("YYYY-MM-DD"); const [showSuccess, setShowSuccess] = useState(false); const [calendarMonth, setCalendarMonth] = useState(dayjs().format("YYYY-MM")); // Suggestion logic: If low mood in last 3 entries, show const recentMoods = useMemo(() => { const dates = Object.keys(moodsByDate).sort((a, b) => (a < b ? 1 : -1)); return dates.slice(0, 5).map((d) => ({ date: d, ...moodsByDate[d] })); }, [moodsByDate]); const lowRecentMood = useMemo(() => { return recentMoods.length > 0 && LOW_MOODS.includes(recentMoods[0].mood); }, [recentMoods]); // Suggest a random uplifting idea const suggestion = useMemo(() => { if (!lowRecentMood) return null; return SUGGESTIONS[(recentMoods[0]?.date.charCodeAt(0) || 0) % SUGGESTIONS.length]; }, [lowRecentMood, recentMoods]); const handleMoodSelect = (moodKey) => { setSelectedMood(moodKey); }; const handleSubmit = (e) => { e.preventDefault(); if (!selectedMood) return; setMoodsByDate((prev) => ({ ...prev, [today]: { mood: selectedMood, note: note.trim() } })); setShowSuccess(true); setNote(""); setTimeout(() => setShowSuccess(false), 1500); }; // Calendar logic const daysInMonth = dayjs(calendarMonth + "-01").daysInMonth(); const firstDay = dayjs(calendarMonth + "-01").day(); // 0 = Sunday const calendarCells = []; // Start calendar from Monday (ISO) const weekStartsOn = 1; // Monday const padStart = (firstDay - weekStartsOn + 7) % 7; for (let i = 0; i < padStart; i++) calendarCells.push(null); for (let d = 1; d <= daysInMonth; d++) { calendarCells.push(d); } const handleMonthChange = (offset) => { const next = dayjs(calendarMonth + "-01").add(offset, "month"); setCalendarMonth(next.format("YYYY-MM")); }; // Recent notes with mood const recentMoodList = recentMoods.length ? (

Mini Mood Journal

How did you feel today?

{showSuccess && (

✅Mood saved!

)} {lowRecentMood && suggestion && (

{suggestion.emoji}

{suggestion.title}

{suggestion.text}

)}

{dayjs(calendarMonth+"-01").format("MMMM YYYY")}

{["Mon","Tue","Wed","Thu","Fri","Sat","Sun"].map(w => (

{w}

))} {calendarCells.map((d, idx) => { if (!d) return

; const dateStr = dayjs(calendarMonth+`-${d.toString().padStart(2,'0')}`).format("YYYY-MM-DD"); const entry = moodsByDate[dateStr]; const isToday = dateStr === today; return (

{entry ? getMoodObj(entry.mood)?.icon : '•'} {d}

); })}

{recentMoodList}

Your mood data is private to you.
Be gentle with yourself 💖

); }