62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
import React, { useState } from 'react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import Button from '@mui/material/Button'
|
|
import Box from '@mui/material/Box'
|
|
import FormControl from '@mui/material/FormControl'
|
|
import Typography from '@mui/material/Typography'
|
|
import TextField from '@mui/material/TextField'
|
|
import { v4 as uuid } from 'uuid'
|
|
|
|
export function Home() {
|
|
const [roomName, setRoomName] = useState(uuid())
|
|
const navigate = useNavigate()
|
|
|
|
const handleRoomNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const { value } = event.target
|
|
setRoomName(value)
|
|
}
|
|
|
|
const handleFormSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
|
|
event.preventDefault()
|
|
navigate(`/public/${roomName}`)
|
|
}
|
|
|
|
return (
|
|
<Box className="Home">
|
|
<header className="max-w-3xl text-center mx-auto">
|
|
<Typography variant="h1">chitchatter</Typography>
|
|
<Typography variant="body1">
|
|
This is a communication tool that is free, open source, and designed
|
|
for maximum security. All communication between you and your online
|
|
peers is encrypted and ephemeral.
|
|
</Typography>
|
|
<Typography variant="body1">
|
|
chitchatter is still a work in progress and not yet ready to be used!
|
|
</Typography>
|
|
</header>
|
|
<main className="mt-8 max-w-3xl text-center mx-auto">
|
|
<form onSubmit={handleFormSubmit} className="max-w-xl mx-auto">
|
|
<FormControl fullWidth>
|
|
<TextField
|
|
label="Room name"
|
|
variant="outlined"
|
|
value={roomName}
|
|
onChange={handleRoomNameChange}
|
|
size="medium"
|
|
/>
|
|
</FormControl>
|
|
<Button
|
|
variant="contained"
|
|
type="submit"
|
|
sx={{
|
|
marginTop: 2,
|
|
}}
|
|
>
|
|
Go to public room
|
|
</Button>
|
|
</form>
|
|
</main>
|
|
</Box>
|
|
)
|
|
}
|