165 lines
4.2 KiB
JavaScript
165 lines
4.2 KiB
JavaScript
// components/PhoneInput.tsx
|
||
import {
|
||
Box,
|
||
Button,
|
||
Divider,
|
||
FormControl,
|
||
FormLabel,
|
||
HStack,
|
||
Icon,
|
||
Input,
|
||
Select,
|
||
Table,
|
||
TableCaption,
|
||
TableContainer,
|
||
Tbody,
|
||
Td,
|
||
Text,
|
||
Textarea,
|
||
Th,
|
||
Thead,
|
||
Tr,
|
||
VStack,
|
||
} from "@chakra-ui/react";
|
||
import { TbFrame } from "react-icons/tb";
|
||
import { TbArrowGuide } from "react-icons/tb";
|
||
import { TbPrompt } from "react-icons/tb";
|
||
import { FaDraft2Digital, FaPlay } from "react-icons/fa";
|
||
import { useForm } from "react-hook-form";
|
||
|
||
export default function TextVideoPanel() {
|
||
const { register, handleSubmit } = useForm();
|
||
|
||
const addSubmit = (e) => {
|
||
console.log(e);
|
||
};
|
||
|
||
return (
|
||
<VStack
|
||
spacing={4}
|
||
w="100%"
|
||
h="100%"
|
||
alignItems="start"
|
||
overflowY="auto"
|
||
as={"form"}
|
||
onSubmit={handleSubmit(addSubmit)}
|
||
>
|
||
{" "}
|
||
<HStack>
|
||
<FormControl as={VStack} alignItems={"start"}>
|
||
<HStack alignItems={"start"}>
|
||
<Icon
|
||
as={TbFrame}
|
||
bgColor={"gray.200"}
|
||
borderRadius={"50%"}
|
||
p={"5px"}
|
||
fontSize={"25px"}
|
||
border={"1px"}
|
||
borderColor={"gray.300"}
|
||
/>
|
||
<FormLabel>تعداد فریم ها</FormLabel>
|
||
</HStack>
|
||
<Input bgColor={"white"} {...register("frames")} />
|
||
</FormControl>
|
||
<FormControl>
|
||
<FormLabel>seed</FormLabel>
|
||
<Input bgColor={"white"} />
|
||
</FormControl>
|
||
</HStack>
|
||
<HStack>
|
||
<FormControl as={VStack} alignItems={"start"}>
|
||
<HStack alignItems={"start"}>
|
||
<Icon
|
||
as={TbArrowGuide}
|
||
bgColor={"gray.200"}
|
||
borderRadius={"50%"}
|
||
p={"5px"}
|
||
fontSize={"25px"}
|
||
border={"1px"}
|
||
borderColor={"gray.300"}
|
||
/>
|
||
<FormLabel>مقیاس راهنمایی</FormLabel>
|
||
</HStack>
|
||
<Input bgColor={"white"} {...register("scale")} />
|
||
</FormControl>
|
||
<FormControl as={VStack} alignItems={"start"}>
|
||
<HStack alignItems={"start"}>
|
||
<Icon
|
||
as={FaDraft2Digital}
|
||
bgColor={"gray.200"}
|
||
borderRadius={"50%"}
|
||
p={"5px"}
|
||
fontSize={"25px"}
|
||
border={"1px"}
|
||
borderColor={"gray.300"}
|
||
/>
|
||
<FormLabel>تعداد</FormLabel>
|
||
</HStack>
|
||
<Input bgColor={"white"} {...register("number")} />
|
||
</FormControl>
|
||
</HStack>
|
||
<FormControl as={VStack} alignItems={"start"}>
|
||
<HStack alignItems={"start"}>
|
||
<Icon
|
||
as={TbPrompt}
|
||
bgColor={"gray.200"}
|
||
borderRadius={"50%"}
|
||
p={"5px"}
|
||
fontSize={"25px"}
|
||
border={"1px"}
|
||
borderColor={"gray.300"}
|
||
/>
|
||
<FormLabel>پرامپت</FormLabel>
|
||
</HStack>
|
||
<Textarea bgColor={"white"} {...register("prompt")} />
|
||
</FormControl>
|
||
<Button p={"20px"} colorScheme="pink" leftIcon={<FaPlay />} type="submit">
|
||
اجرا
|
||
</Button>
|
||
<Divider my={"20px"} />
|
||
<FormControl
|
||
as={HStack}
|
||
w={"100%"}
|
||
justifyContent={"space-between"}
|
||
bgColor={"purple.50"}
|
||
border={"1px"}
|
||
borderColor={"gray.200"}
|
||
p={"10px"}
|
||
borderRadius={"10px"}
|
||
>
|
||
<FormLabel fontSize={"20px"}>پاسخ</FormLabel>
|
||
<Box
|
||
w={"200px"}
|
||
h={"200px"}
|
||
border={"1px"}
|
||
borderColor={"gray.300"}
|
||
borderRadius={"10px"}
|
||
bgColor={"white"}
|
||
></Box>
|
||
</FormControl>
|
||
<Divider my={"20px"} />
|
||
<TableContainer w={"100%"} mt={"50px"}>
|
||
<Table>
|
||
<Thead>
|
||
<Tr>
|
||
<Th fontSize={"20px"}>ردیف</Th>
|
||
</Tr>
|
||
</Thead>
|
||
<Tbody></Tbody>
|
||
</Table>
|
||
</TableContainer>
|
||
<Divider my={"20px"} />
|
||
<FormControl
|
||
bgColor={"purple.50"}
|
||
border={"1px"}
|
||
borderColor={"gray.200"}
|
||
p={"10px"}
|
||
borderRadius={"10px"}
|
||
>
|
||
<FormLabel fontSize={"20px"}>نتیجه</FormLabel>
|
||
<Textarea bgColor={"white"} />
|
||
</FormControl>
|
||
</VStack>
|
||
);
|
||
}
|