79 lines
2.5 KiB
React
79 lines
2.5 KiB
React
import Widget from "./Widget.jsx";
|
|
import { Fieldset, NativeSelect, For, Box, Field, Input, Button, Text, Flex } from "@chakra-ui/react";
|
|
import { useForm } from "react-hook-form";
|
|
import { useState } from "react";
|
|
import { Asterisk } from 'lucide-react';
|
|
|
|
export default function AlertLevel({id, isEditable, isDelete, DeleteWidget}) {
|
|
const { register, handleSubmit, reset, formState: {errors} } = useForm();
|
|
const [isSubmit, setIsSubmit] = useState(false);
|
|
|
|
const onSubmit = (data) => {
|
|
setIsSubmit(true);
|
|
reset();
|
|
}
|
|
|
|
// Prop Forwarding
|
|
const widgetProps = { id, isEditable, isDelete, DeleteWidget, isSubmit, setIsSubmit }
|
|
|
|
return (
|
|
<Widget title="Alert Level" {...widgetProps} >
|
|
{!isSubmit ? (
|
|
// DISPLAYING INPUT FIElDS AND LABELS
|
|
<Box
|
|
as="form"
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
width="100%"
|
|
p={3}
|
|
display="flex"
|
|
flexDir="column"
|
|
>
|
|
<Fieldset.Root size="md" maxW="md">
|
|
<Fieldset.Content>
|
|
<Field.Root>
|
|
<Field.Label fontWeight="semibold">Volcano</Field.Label>
|
|
<Input name="volcanoname" />
|
|
</Field.Root>
|
|
|
|
<Field.Root>
|
|
<Field.Label fontWeight="semibold">Country</Field.Label>
|
|
<NativeSelect.Root>
|
|
<NativeSelect.Field name="country">
|
|
<For each={["United Kingdom", "Canada", "United States"]}>
|
|
{(item) => (
|
|
<option key={item} value={item}>
|
|
{item}
|
|
</option>
|
|
)}
|
|
</For>
|
|
</NativeSelect.Field>
|
|
<NativeSelect.Indicator />
|
|
</NativeSelect.Root>
|
|
</Field.Root>
|
|
</Fieldset.Content>
|
|
|
|
<Button type="submit" size="sm">Submit</Button>
|
|
</Fieldset.Root>
|
|
</Box>
|
|
):(
|
|
// DISPLAYING ALERT LEVEL DATA
|
|
<Box p={1} mt={1} ml="auto" mr="auto" width="200px">
|
|
<Box
|
|
bg="bg"
|
|
shadow="md"
|
|
borderRadius="md"
|
|
p={8}
|
|
width="200px"
|
|
height="10px"
|
|
textAlign="center"
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
>
|
|
<Text fontsize="2xl" fontWeight="bold" color="gray.700">Alert Level Data Coming Soon.</Text>
|
|
</Box>
|
|
</Box>
|
|
)}
|
|
</Widget>
|
|
);
|
|
} |