\n {/* Header */}\n

\n Grapheme Counter\n

\n Count graphemes in text including emojis and complex characters\n

\n\n {/* Main Content - Two column layout on larger screens */}\n

\n {/* Left Column - Main Content */}\n

\n {/* Text Input */}\n

\n \n Enter your text:\n \n \n

\n \n Clear text\n \n

\n\n {/* Statistics */}\n

\n {stats.graphemeCount}\n

Graphemes

\n {stats.characterCount}\n

Characters

\n {stats.wordCount}\n

Words

\n\n {/* Explanation */}\n

\n What are graphemes?\n

\n Graphemes are the smallest units of a writing system. They can be single characters, emojis, or\n combinations of characters that form a single visual unit. For example, \"dinosaurs 🦕 🌋🌴☄️\" contains\n 14 graphemes: \"d\", \"i\", \"n\", \"o\", \"s\", \"a\", \"u\", \"r\", \"s\", \" \", \"🦕\", \"🌋\", \"🌴\", \"☄️\".\n

\n\n {/* Right Column - Examples (hidden on mobile, shown on lg+) */}\n

\n Try these examples:\n

\n {exampleTexts.map((exampleText, index) => (\n handleExampleClick(exampleText)}\n className=\"w-full text-left p-3 border border-gray-200 rounded-lg hover:bg-gray-50 hover:border-gray-300 transition-colors\"\n >\n

\n {exampleText}\n

\n {countGraphemes(exampleText)} graphemes\n

\n \n ))}\n

\n\n {/* Mobile Examples - Shown below on smaller screens */}\n

\n Try these examples:\n

\n {exampleTexts.map((exampleText, index) => (\n handleExampleClick(exampleText)}\n className=\"text-left p-3 border border-gray-200 rounded-lg hover:bg-gray-50 hover:border-gray-300 transition-colors\"\n >\n

{exampleText}

\n {countGraphemes(exampleText)} graphemes\n

\n \n ))}\n

\n\n {/* Footer */}\n

\n Built with React and Intl.Segmenter for accurate grapheme counting\n

\n );\n}","deleted","label",[171,172,154],"frontend","components","permalink","https://www.val.town/x/dpip/graphemeCounter/code/frontend/components/App.tsx","extension","actionData","errors"]