login.tsx

'use client'

import { useState } from 'react'
import {
  Dialog,
  DialogPanel,
  DialogTitle,
  Description,
} from '@headlessui/react'
import { state, useSnapshot } from '@/state'
import { useLoggedIn } from '@/hooks/use-logged-in'
import { Heading } from '@/components/heading'
import { Paragraph } from '@/components/paragraph'

export default function LoginDialog() {
  const [isOpen, setIsOpen] = useState(false)
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [errorMessage, setErrorMessage] = useState('')
  const snap = useSnapshot(state)