feat: add counter to notepad

package.json

@@ -34,6 +34,7 @@
     "react-dom": "^18.2.0",
     "react-icons": "4.11.0",
     "react-wrap-balancer": "1.1.0",
+    "word-counting": "1.1.4",
     "zustand": "4.4.3"
   },
   "devDependencies": {

src/components/toolbox/notepad/notepad.module.css

@@ -24,3 +24,10 @@
   outline: none;
   scroll-padding-bottom: 12px;
 }
+
+.counter {
+  margin-top: 8px;
+  font-size: var(--font-sm);
+  color: var(--color-foreground-subtle);
+  text-align: center;
+}

src/components/toolbox/notepad/notepad.tsx

@@ -11,6 +11,8 @@ interface NotepadProps {
 export function Notepad({ onClose, show }: NotepadProps) {
   const note = useNoteStore(state => state.note);
   const write = useNoteStore(state => state.write);
+  const words = useNoteStore(state => state.words());
+  const characters = useNoteStore(state => state.characters());
 
   return (
     <Modal show={show} wide onClose={onClose}>
@@ -24,6 +26,11 @@ export function Notepad({ onClose, show }: NotepadProps) {
         value={note}
         onChange={e => write(e.target.value)}
       />
+
+      <p className={styles.counter}>
+        {characters} character{characters !== 1 && 's'} • {words} word
+        {words !== 1 && 's'}
+      </p>
     </Modal>
   );
 }

src/helpers/counter.ts

@@ -0,0 +1,10 @@
+import wordsCounter from 'word-counting';
+
+export function count(_string: string) {
+  const string = _string.trim();
+
+  return {
+    characters: string.replace(/\s/g, '').length,
+    words: wordsCounter(string).wordsCount,
+  };
+}