76 lines
2.0 KiB
React
76 lines
2.0 KiB
React
import { Box, Flex, Field, Input, Stack, Heading, Button } from "@chakra-ui/react"
|
|
import { useForm } from 'react-hook-form';
|
|
|
|
export default function Account() {
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
watch,
|
|
formState: { errors },
|
|
} = useForm();
|
|
|
|
const onSubmit = (data) => {
|
|
console.log("Form submitted:", data);
|
|
}
|
|
|
|
console.log(watch("example")); // watch input value by passing the name of it
|
|
|
|
return (
|
|
<Flex
|
|
height="100vh"
|
|
direction="column"
|
|
align="start"
|
|
justify="start"
|
|
bg="gray.50"
|
|
pt={6}
|
|
pl={6}
|
|
>
|
|
<Heading as="h1" mb={2}>Account</Heading>
|
|
|
|
<Box
|
|
as="form"
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
border="1px solid"
|
|
borderColor="gray.300"
|
|
borderRadius="md"
|
|
padding={4}
|
|
bg="white"
|
|
boxShadow="md"
|
|
width="100%"
|
|
maxW="sm"
|
|
>
|
|
{/* <Text fontSize="xl" fontWeight="bold" mb={6}>
|
|
Account
|
|
</Text> */}
|
|
|
|
<Stack gap="6" maxW="sm" css={{ "--field-label-width": "96px" }}>
|
|
<Field.Root orientation="horizontal">
|
|
<Field.Label>User Name</Field.Label>
|
|
<Input {...register("username")} placeholder="David Johnston" flex="1" />
|
|
</Field.Root>
|
|
|
|
<Field.Root orientation="horizontal">
|
|
<Field.Label> First Name</Field.Label>
|
|
<Input {...register("firstname")} placeholder="David" flex="1" />
|
|
</Field.Root>
|
|
|
|
<Field.Root orientation="horizontal">
|
|
<Field.Label>Last Name</Field.Label>
|
|
<Input {...register("lastname")} placeholder="Johnston" flex="1" />
|
|
</Field.Root>
|
|
|
|
<Field.Root orientation="horizontal">
|
|
<Field.Label>Email</Field.Label>
|
|
<Input {...register("email")} placeholder="djohntson@usgs.gov" flex="1" />
|
|
</Field.Root>
|
|
|
|
<Button type="submit">
|
|
Save
|
|
</Button>
|
|
|
|
</Stack>
|
|
</Box>
|
|
</Flex>
|
|
)
|
|
}
|