diff --git a/src/app/ibuchukwu/testpage2/container/TestPage2Container.tsx b/src/app/ibuchukwu/testpage2/container/TestPage2Container.tsx new file mode 100644 index 0000000..ef94f90 --- /dev/null +++ b/src/app/ibuchukwu/testpage2/container/TestPage2Container.tsx @@ -0,0 +1,20 @@ +"use client"; + +import { useState } from "react"; +import { FormTestPageTemplate } from "~/components/Templates/FormTestPage/FormTestPageTemplate"; + +export const TestPageTwoContainer = () => { + const [formData, setFormData] = useState({}); + + const formTestPageTemplateProps: React.ComponentProps< + typeof FormTestPageTemplate + > = { + formTestPageHeaderModuleProps: { + title: "Vote", + }, + formTestPageFormModuleProps: { + setFormData, + }, + }; + return ; +}; diff --git a/src/app/ibuchukwu/testpage2/page.tsx b/src/app/ibuchukwu/testpage2/page.tsx new file mode 100644 index 0000000..25138f5 --- /dev/null +++ b/src/app/ibuchukwu/testpage2/page.tsx @@ -0,0 +1,7 @@ +import { TestPageTwoContainer } from "./container/TestPage2Container"; + +const TestPageTwo = () => { + return ; +}; + +export default TestPageTwo; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 3a8a114..908ad5f 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -15,12 +15,12 @@ export default function RootLayout({ children: React.ReactNode; }) { return ( - - -
+ + +
{children} -
-
+
+
diff --git a/src/components/Atoms/FormPageHeaderAtom/FormPageHeaderAtom.tsx b/src/components/Atoms/FormPageHeaderAtom/FormPageHeaderAtom.tsx new file mode 100644 index 0000000..dbe3b04 --- /dev/null +++ b/src/components/Atoms/FormPageHeaderAtom/FormPageHeaderAtom.tsx @@ -0,0 +1,13 @@ +type Props = { + title: string; +}; + +export const FormPageHeaderAtom = (prop: Props) => { + return ( +
+

+ {prop.title} +

+
+ ); +}; diff --git a/src/components/Modules/FormTestPage/FormTestPageContentModule.tsx b/src/components/Modules/FormTestPage/FormTestPageContentModule.tsx new file mode 100644 index 0000000..dabd297 --- /dev/null +++ b/src/components/Modules/FormTestPage/FormTestPageContentModule.tsx @@ -0,0 +1,22 @@ +import { Button, DatePicker, Form, Input, message, Select } from "antd"; +import { CameraFilled } from "@ant-design/icons"; +import TextArea from "antd/es/input/TextArea"; +import { FormTestPageFormModule } from "./FormTestPageFormModule"; + +type Props = { + setFormData: (data: any) => void; +}; + +export const FormTestPageContentModule = (props: Props) => { + return ( +
+
+ 10 FAO will be + deducted when voting is generated (Amount : 9 FAO) +
+
+ +
+
+ ); +}; diff --git a/src/components/Modules/FormTestPage/FormTestPageFormModule.tsx b/src/components/Modules/FormTestPage/FormTestPageFormModule.tsx new file mode 100644 index 0000000..dc9b294 --- /dev/null +++ b/src/components/Modules/FormTestPage/FormTestPageFormModule.tsx @@ -0,0 +1,68 @@ +import { Button, DatePicker, Form, Input, message, Select } from "antd"; +import { CameraFilled } from "@ant-design/icons"; +import TextArea from "antd/es/input/TextArea"; + +type Props = { + setFormData: (data: any) => void; +}; + +export const FormTestPageFormModule = (props: Props) => { + const [form] = Form.useForm(); + const onFinish = (values: any) => { + void message.info(JSON.stringify(values)); + }; + + return ( +
{ + props.setFormData((prevData: any) => + changedFields.reduce( + (acc, { name, value }) => ({ ...acc, [name[0]]: value }), + prevData + ) + ); + }} + labelCol={{ + style: { fontFamily: "Inter", fontWeight: 500 }, + }} + > + + + + + + + +
+ +
+ + +