You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Label } from '@radix-ui/react-label'
|
|
import { Inter } from 'next/font/google'
|
|
import Head from 'next/head'
|
|
import { useRouter } from 'next/router'
|
|
import { useState } from 'react'
|
|
|
|
const inter = Inter({ subsets: ['latin'] })
|
|
|
|
export default function Home() {
|
|
const router = useRouter()
|
|
const [roomName, setRoomName] = useState('')
|
|
|
|
const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
|
|
if (!roomName) {
|
|
alert('请输入房间名');
|
|
return;
|
|
}
|
|
router.push(`/room/${roomName}`);
|
|
}
|
|
|
|
return (
|
|
<main
|
|
className={`${inter.className}`}
|
|
>
|
|
<Head>
|
|
<title>一起看</title>
|
|
</Head>
|
|
<div className='flex justify-center items-center h-screen'>
|
|
<form className='flex flex-col gap-3' onSubmit={onSubmit}>
|
|
<Label className='font-bold text-center'>一起看</Label>
|
|
<Input placeholder='请输入房间名' onChange={(e) => setRoomName(e.target.value)} name="roomId" autoCapitalize="none" />
|
|
<Button type='submit'>加入</Button>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|