feat: add jotai example

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tanstack/react-location": "^3.7.4",
+    "jotai": "^1.8.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "recoil": "^0.7.6"

src/App.tsx

@@ -1,13 +1,14 @@
 import {Outlet, ReactLocation, Router} from '@tanstack/react-location'
 
 import {Home} from './home'
-import {RecoilCharacterCounter} from './examples/recoil'
+import {JotaiCharacterCounter, RecoilCharacterCounter} from './examples'
 
 const location = new ReactLocation()
 
 const routes = [
   {path: '/', element: <Home />},
   {path: 'recoil', element: <RecoilCharacterCounter />},
+  {path: 'jotai', element: <JotaiCharacterCounter />},
 ]
 
 function App() {

src/examples/index.ts

@@ -0,0 +1,2 @@
+export * from './jotai'
+export * from './recoil'

src/examples/jotai.tsx

@@ -0,0 +1,41 @@
+import type {ChangeEvent} from 'react'
+import {atom, useAtom} from 'jotai'
+
+const textAtom = atom('')
+
+const charCountAtom = atom(get => {
+  const text = get(textAtom)
+  return text.length
+})
+
+function TextInput() {
+  const [text, setText] = useAtom(textAtom)
+
+  const onChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setText(event.target.value)
+  }
+  return (
+    <div>
+      <input type="text" value={text} onChange={onChange} />
+      <br />
+      Echo: {text}
+    </div>
+  )
+}
+
+function CharacterCount() {
+  const count = useAtom(charCountAtom)
+  return <>Character Count: {count}</>
+}
+
+function JotaiCharacterCounter() {
+  return (
+    <>
+      <h1>Jotai</h1>
+      <TextInput />
+      <CharacterCount />
+    </>
+  )
+}
+
+export {JotaiCharacterCounter}

src/examples/recoil.tsx

@@ -43,6 +43,7 @@ function CharacterCount() {
 function RecoilCharacterCounter() {
   return (
     <RecoilRoot>
+      <h1>Recoil</h1>
       <TextInput />
       <CharacterCount />
     </RecoilRoot>