Quote of the Day Component

Quote of the Day Component

Overview

The QuoteOfTheDay component displays a daily inspirational quote on the dashboard, centered between the "Change Layout" button and the date picker. The quote rotates every 24 hours at midnight Central Time (America/Chicago), ensuring all users see the same quote on any given day.

Features

• Daily rotation: Quote changes at midnight Central Time (CT)
• Deterministic selection: Uses date-based index so all users see the same quote
• Desktop only: Hidden on mobile devices to maintain clean mobile UX
• 365 curated quotes: Full year of unique daily wisdom
• Italic styling: Elegant presentation with author attribution

Quote Sources (365 Total)

Quotes are curated from diverse sources including:

Stoic Philosophy (~36 quotes)

• Marcus Aurelius (12) - Roman Emperor, Meditations
• Seneca (12) - Roman philosopher, Letters from a Stoic
• Epictetus (12) - Greek Stoic philosopher, Enchiridion

Eastern Wisdom (~53 quotes)

• Lao Tzu (15) - Tao Te Ching
• Buddha (15) - Buddhist teachings
• Confucius (15) - Analects
• Thich Nhat Hanh (10) - Modern Buddhist teacher

Persian Poetry (~23 quotes)

• Rumi (15) - 13th century Sufi poet
• Hafiz (8) - 14th century Persian poet

Middle Eastern Wisdom (~8 quotes)

• Kahlil Gibran (8) - The Prophet

Ancient Greek Philosophy (~32 quotes)

• Aristotle (12) - Ethics, Politics
• Socrates (10) - Dialogues
• Plato (10) - Republic, Dialogues

Modern Thinkers (~28 quotes)

• Mahatma Gandhi (15) - Indian independence leader
• Viktor Frankl (8) - Man's Search for Meaning
• Carl Jung (10) - Analytical psychology
• Alan Watts (8) - Eastern philosophy interpreter

Transcendentalists (~24 quotes)

• Henry David Thoreau (12) - Walden
• Ralph Waldo Emerson (12) - Essays

Inspirational Figures (~50 quotes)

• Maya Angelou (10) - American poet
• Helen Keller (10) - Author, activist
• Albert Einstein (10) - Physicist
• Eleanor Roosevelt (8) - First Lady, diplomat
• Nelson Mandela (8) - South African leader
• Winston Churchill (8) - British Prime Minister

World Proverbs (~38 quotes)

• Japanese Proverbs (8)
• Chinese Proverbs (8)
• African Proverbs (8)
• Buddhist Proverbs (6)
• Native American Proverbs (8)

Additional Wisdom (~20 quotes)

• Leonardo da Vinci, Pablo Picasso, Mark Twain, Steve Jobs, Walt Disney, Theodore Roosevelt, and others

Design Specifications

| Property | Value |

|----------|-------|

| Font style | Italic (quote text), Normal (author) |

| Font size | `text-sm` (14px) |

| Color | `text-muted-foreground` |

| Visibility | Desktop only (`hidden md:flex`) |

| Position | Centered, flex-1 between layout controls |

| Max width | `max-w-2xl` (42rem / 672px) |

| Padding | `px-6` (24px horizontal) |

| Text alignment | Center |

Usage

import { QuoteOfTheDay } from './components/QuoteOfTheDay';

// In dashboard header area
<div className="flex items-center justify-between">
  <Button>Change Layout</Button>
  <QuoteOfTheDay />
  <Select>...</Select>
</div>

Props

The component accepts no props. It is self-contained and manages its own state.

Quote Selection Algorithm

const getDailyQuote = () => {
  // Get current date in Central Time (America/Chicago)
  const centralTime = new Date().toLocaleString('en-US', { timeZone: 'America/Chicago' });
  const today = new Date(centralTime);
  const startOfYear = new Date(today.getFullYear(), 0, 0);
  const diff = today.getTime() - startOfYear.getTime();
  const dayOfYear = Math.floor(diff / (1000 * 60 * 60 * 24));
  const index = dayOfYear % quotes.length;
  return quotes[index];
};

Timezone Behavior

• Quote rotation occurs at midnight Central Time (CT)
• Central Time = UTC-6 (Standard) or UTC-5 (Daylight Saving)
• All users worldwide see the same quote on the same CT calendar day
• Example: At 11:59 PM CT on Jan 1, quote #1 shows. At 12:00 AM CT on Jan 2, quote #2 shows.

Quote Format

Each quote object follows this structure:

interface Quote {
  text: string;   // The quote text
  author: string; // Attribution
}

Styling Guidelines

• Quotes can wrap to multiple lines on narrower desktop screens
• Author name follows an em dash: — Author Name
• Author name is non-italic for visual distinction
• No quotation marks needed (italic styling implies quotation)
• Subtle, non-intrusive appearance that complements the dashboard

Accessibility

• Uses semantic HTML with proper text contrast
• Screen readers will read the quote naturally
• No interactive elements requiring keyboard navigation

Why Not a Supabase Table?

The quotes are stored directly in the component rather than a database table because:

• Performance: No database call needed, instant load
• Simplicity: No admin UI required to manage quotes
• Bundle size: ~35KB for 365 quotes is negligible
• Reliability: Works offline, no network dependency

Consider migrating to Supabase if you later need:

• Per-organization custom quotes
• Admin UI to add/edit quotes
• User-submitted quotes
• A/B testing different quote sets

Future Enhancements

Potential future improvements:

• User favorites/bookmarking
• Share quote functionality
• Custom quote collections per organization
• Seasonal or themed quote rotations
• "See yesterday's quote" feature

Synced from IFMmvp-Frontend documentation: pages/components/21-QUOTE-OF-THE-DAY.md