🏠Implement Main Word Display Component with Pronunciation, Audio, Metadata, and Navigation

[devJasonClarke]

Ticket ID: UI-002
Status: To Do
Type: Feature
Priority: Medium
Assignee: [Frontend Developer]
Estimate: 1 – 1.5 days

---

🎯 Objective

Develop the main word display component for the Jamaican Patois Dictionary's "Word of the Day" feature. This includes rendering the word prominently, displaying pronunciation and part of speech, adding an audio playback button, and enabling navigation through previous/next word entries.

---

✅ Acceptance Criteria

• The word is displayed in large, clear typography.
• Text-based pronunciation is shown (e.g., ni·yam).
• A functional audio playback button is available beside the word.
• Part of speech (e.g., verb) is shown beneath the word.
• Left and right arrow buttons allow users to navigate to the previous or next word.
• Styling is consistent with the existing design and responsive on all viewports.

---

📋 Tasks

1. Main Word Display Component

• Render current word of the day in header section
• Display pronunciation (phonetic spelling)
• Show part of speech (e.g., noun, verb)

2. Audio Playback Integration

• Add audio icon/button
• Link to and play provided pronunciation audio file

3. Word Navigation Controls

• Add left/right arrow buttons
• On click, load previous or next word entry
• Maintain URL state if applicable (e.g., ?date=2025-07-28)

4. Responsive Layout & Styling

• Ensure mobile and desktop responsiveness
• Match existing font sizes, colors, and padding

---

🧰 Tools & Resources

• Vue/React (depending on frontend stack)
• Audio player library or HTML5 <audio> element
• Design system or existing CSS components
• API endpoint for word metadata and navigation

---

🔗 References

• Style mockups or Figma (if available)
• Current live implementation: https://jamaicanpatwa.com/word/nyam
• Example audio integration: [MDN HTML Audio](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio)
• Design link: https://www.figma.com/design/CKI7T1PwNzXd1QkWIlY9TC/Patwa-Dictionary?node-id=22-363&t=ON01vPTXfPsV4QcJ-0

---