Code-MCP

import { atom, useAtom } from 'jotai'; import { atomWithStorage } from 'jotai/utils'; // ============================================ // Atoms // ============================================ // Primitive Atoms export const countAtom = atom(0); export const textAtom = atom('hello'); // Derived Atoms (Computed) export const doubleCountAtom = atom((get) => get(countAtom) * 2); export const uppercaseTextAtom = atom( (get) => get(textAtom).toUpperCase(), (get, set, newText: string) => set(textAtom, newText.toLowerCase()) // Writeable derived atom ); // Persisted Atom (localStorage) export const themeAtom = atomWithStorage<'light' | 'dark'>('theme', 'light'); // Async Atom export const usersAtom = atom(async () => { const res = await fetch('https://jsonplaceholder.typicode.com/users'); return await res.json(); }); // Action Atoms (Write-only) export const incrementCountAtom = atom( null, // getter (null = write-only) (get, set) => set(countAtom, get(countAtom) + 1) ); // ============================================ // Components // ============================================ export const Counter = () => { const [count, setCount] = useAtom(countAtom); const [doubleCount] = useAtom(doubleCountAtom); return ( <div> <h1>Count: { count } </h1> < h2 > Double: { doubleCount } </h2> < button onClick = {() => setCount(c => c + 1)}> Increment </button> </div> ); }; export const ThemeToggle = () => { const [theme, setTheme] = useAtom(themeAtom); return ( <button onClick= {() => setTheme(theme === 'light' ? 'dark' : 'light')} style = {{ background: theme === 'dark' ? '#333' : '#fff', color: theme === 'dark' ? '#fff' : '#000' }} > Current Theme: { theme } </button> ); }; export const UserList = () => { // Jotai Suspense support const [users] = useAtom(usersAtom); return ( <ul> { users.map((user: any) => ( <li key= { user.id } > { user.name } </li> )) } </ul> ); };