refactor: dynamically import wortlizer component and change to ts-hooks

Author: idosius

package-lock.json

@@ -17,7 +17,6 @@
   "dependencies": {
     "@radix-ui/react-slot": "^1.2.3",
     "@tailwindcss/postcss": "^4.1.13",
-    "@uidotdev/usehooks": "^2.4.1",
     "@vercel/analytics": "^1.5.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -30,7 +29,8 @@
     "react-dom": "^19.1.1",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.13",
-    "tw-animate-css": "^1.3.8"
+    "tw-animate-css": "^1.3.8",
+    "usehooks-ts": "^3.1.1"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

package.json

@@ -1,3 +1,5 @@
+'use client'
+
 import { Button } from '@/components/ui/Button'
 import { Input } from '@/components/ui/Input'
 import { useState } from 'react'

src/components/WordForm.tsx

@@ -6,7 +6,7 @@ import { WortschatzEntry, Wortschatz } from '@/types/wortilizer.types'
 import { Genders, WordsInfo } from 'german-words-dict'
 import { getGenderGermanWord } from 'german-words'
 import GermanWordsList from 'german-words-dict/dist/words.json'
-import { useLocalStorage } from '@uidotdev/usehooks'
+import { useLocalStorage } from 'usehooks-ts'
 import { moveIndexToFirst } from '@/lib/array'
 
 const genderArticles: Record<Genders, WortschatzEntry['article']> = {