Final Iteration Proposal

[dndrade]

Layout structure rework for both Learn and Quiz front end features. All pages are now visually and structurally consistent, fully modular, and debug-friendly with named layout wrappers, visual outlines, and responsive slot configuration.

---

✨ What's Included

🔧 Layout Components

• LearnLayout.tsx

  • Title row: Back button, Title, Next button
  • Subtitle support + optional section tabs
  • Slot layout variants: single, twoColumns, threeColumns, multiRows
  • Per-child flex direction support (row or column)
  • Visual outlines for debugging and dev previews
  • Named presets:
    • Vowels101Layout
    • TackleMinimalPairsLayout
    • GetYourGraphemesLayout
    • MapVowelSpaceLayout

• QuizLayout.tsx

  • Quiz-specific header row: Back | Title | Progress (centered) | Next
  • Smaller title size to accommodate centered progress
  • Quiz stage label + flexible grid layout
  • Variants: twoColumns, threeColumns, stacked
  • Per-slot flex direction control
  • Named presets:
    • VowelShuffleLayout
    • SpellAndTellLayout
    • PairPlayLayout
    • PhonicTrioLayout

---

🧭 Navigation Components

• PageNavButton.tsx

  • Reusable directional button (←/→) with:
    • Sizing tokens (xs, sm, md, lg)
    • Variants: icon-only, icon+text, text-only
    • ghost and primary styles
  • Focus + active state interactions
  • Named exports for:
    • IconOnlyBack, IconOnlyNext
    • IconTextBack, IconTextNext
    • TextOnlyBack, TextOnlyNext

• LinkButton.tsx

  • Styled <Link> with solid and outline variants
  • Responsive padding via small, medium, large sizes
  • Optional forced active state for manual highlighting

---

📊 Progress Bar

• QuizProgressBar.tsx
  • Simple animated progress bar with:
    • Capsule-style fill
    • Optional current / total label
    • Centered alignment
  • Fully theme-aware

---

✅ Status

• Learn layout fully implemented
• Quiz layout updated and refactored
• Navigation buttons standardized
• Progress bar component styled and wired
• Outlines enabled for layout debugging
• All routes and modules rendered correctly

---

🧪 What's Left?

• ⚙️ Populate Learn & Quiz content:

  • Current lesson and quiz pages are structured with layout placeholders.
  • Final interactive content and activity logic need to be added.
  • This can be achieved by composing existing documented supercomponents from src/components/ui/.
    • some of the new super components are the IteractiveCollection, MenuPresets and IllustrationWrapper
  • Each supercomponent is configurable and designed to snap into the layout structure.

• 💡 polish:

  • Remove outline styles in production builds