Rename and Restructure

+ took out extra 'layout' directory. + 'Canvas' postfix removed from all files in the views directory. + "WidgetCanvas" renamed to "MyDashboard"
2025-08-05 12:57:18 -07:00
parent 03a335710f
commit ff95f2cbc0
27 changed files with 20 additions and 20 deletions
@@ -0,0 +1,75 @@
+import { Box, Flex, Field, Input, Stack, Heading, Button } from "@chakra-ui/react"
+import { useForm } from 'react-hook-form';
+
+export default function AccountCanvas()  {
+  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>
+  )
+}