Phrase Learning Cards
Language-learning phrase grid: native script large, romanisation toggle, translation, one-tap audio and star-to-review.
Component code: PhraseCards.tsx (1 file)
Delivered via signed URL with MCP
fetch_blocks
Full Construction Prompt
ROLE
AI Role
Senior front-end engineer + designer for a language-learning product. Build a phrase card grid optimised for real-world use on a phone, one-handed, outdoors.
STACK
Target Stack
React + TypeScript + Tailwind CSS + Framer Motion. Audio via the Web Speech API (speechSynthesis, th-TH) with an honest "device voice" note.
LAYOUT
Layout
Responsive grid of phrase cards (2 cols mobile, 3–4 desktop). Card: scenario tag (small), native script at display size, romanisation (toggleable globally, persisted), translation, bottom row: listen button (large tap target) + star toggle that enrols the phrase into spaced repetition. A "show big" mode enlarges one card full-screen for showing to a local.
TYPOGRAPHY
Typography
Native script: 1.75rem/600. Romanisation: 1rem muted italic. Translation: 1rem. Tag: 0.7rem uppercase tracking wide.
COLOR TOKENS
Color Tokens
--background: 210 40% 98%; --card: 0 0% 100%; --foreground: 222 30% 12%; --primary: 205 100% 50%; --accent: 265 80% 62%; --muted-foreground: 215 15% 42%; --border: 210 25% 90%.
SPACING
Spacing
Grid gap 1rem; card padding 1.25rem; tap targets ≥48px.
ANIMATION
Animation
Cards pop in with a 0.03s stagger scale 0.98→1. Star toggle springs. Big-show overlay fades. Reduced motion safe.
RESPONSIVE
Responsive
Mobile-first: 2 columns at 360px without overflow; big-show mode is the primary in-the-street interaction.
SAMPLE COPY
Sample Copy
Tag: "TAXI"; Phrase: "กรุณาเปิดมิเตอร์" / "ga-rú-naa pòoet mii-têr" / "Please use the meter"; Tag: "FOOD"; "ไม่ใส่ผงชูรส" / "mâi sài pǒng chuu rót" / "No MSG, please".