12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
import { useAtom } from 'jotai'import { textAtom, uppercaseAtom } from '../atoms'import { Code } from '../components'
export const CoreDemo = () => {  const Input = () => {    const [text, setText] = useAtom(textAtom)
    return (      <input        value={text}        onChange={(event) => setText(event.target.value)}        className="w-full focus:!ring-transparent bg-transparent"      />    )  }
  const Uppercase = () => {    const [uppercase] = useAtom(uppercaseAtom)
    return <span className="flex-shrink-0 font-bold">{uppercase}</span>  }
  const code = `import { atom, useAtom } from 'jotai'
// Create your atoms and derivativesconst textAtom = atom('hello')const uppercaseAtom = atom(  (get) => get(textAtom).toUpperCase())
// Use them anywhere in your appconst Input = () => {  const [text, setText] = useAtom(textAtom)  const handleChange = (e) => setText(e.target.value)  return (    <input value={text} onChange={handleChange} />  )}
const Uppercase = () => {  const [uppercase] = useAtom(uppercaseAtom)  return (    <div>Uppercase: {uppercase}</div>  )}
// Now you have the componentsconst App = () => {  return (    <>      <Input />      <Uppercase />    </>  )}`
  return (    <>      <div className="py-8 text-sm">        <div className="flex items-center px-4 py-2 focus-within:ring border border-gray-300 dark:border-gray-800 rounded-lg bg-white dark:bg-gray-950 text-lg">          <Input />          <Uppercase />        </div>      </div>      <Code>{code}</Code>    </>  )}