namu-labs-dev · B-uchi · Oct 6, 2024 · Oct 6, 2024 · Oct 6, 2024 · Oct 6, 2024
diff --git a/src/app/ibuchukwu/testpage2/container/TestPage2Container.tsx 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<any>({});
+
+  const formTestPageTemplateProps: React.ComponentProps<
+    typeof FormTestPageTemplate
+  > = {
+    formTestPageHeaderModuleProps: {
+      title: "Vote",
+    },
+    formTestPageFormModuleProps: {
+      setFormData,
+    },
+  };
+  return <FormTestPageTemplate {...formTestPageTemplateProps} />;
+};
diff --git a/src/app/ibuchukwu/testpage2/page.tsx b/src/app/ibuchukwu/testpage2/page.tsx
@@ -0,0 +1,7 @@
+import { TestPageTwoContainer } from "./container/TestPage2Container";
+
+const TestPageTwo = () => {
+  return <TestPageTwoContainer />;
+};
+
+export default TestPageTwo;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -15,12 +15,12 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" className={`${GeistSans.variable}`}>
-      <body className="bg-[#efefef]">
-        <div className="m-auto h-screen max-w-[500px] overflow-auto bg-white">
+    <html lang='en' className={`${GeistSans.variable}`}>
+      <body className='bg-[#efefef]'>
+        <div className='m-auto h-screen w-fit max-w-[500px] overflow-auto bg-white'>
           <GlobalLayout>{children}</GlobalLayout>
-          <div id="custom-drawer" />
-          <div id="custom-modal" />
+          <div id='custom-drawer' />
+          <div id='custom-modal' />
         </div>
       </body>
     </html>

diff --git a/src/components/Atoms/FormPageHeaderAtom/FormPageHeaderAtom.tsx b/src/components/Atoms/FormPageHeaderAtom/FormPageHeaderAtom.tsx
@@ -0,0 +1,13 @@
+type Props = {
+  title: string;
+};
+
+export const FormPageHeaderAtom = (prop: Props) => {
+  return (
+    <div className='flex h-full items-center justify-center bg-white'>
+      <h1 className='font-inter text-[18.6px] font-[700] opacity-85'>
+        {prop.title}
+      </h1>
+    </div>
+  );
+};
diff --git a/src/components/Modules/FormTestPage/FormTestPageContentModule.tsx 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 (
+    <div className=''>
+      <div className='font-pretendard bg-[#F0F5FF] px-[21px] py-[13px] text-[16px]'>
+        <span className='font-[700] text-[#2F54EB]'>10 FAO</span> will be
+        deducted when voting is generated (Amount : 9 FAO)
+      </div>
+      <div className='p-[20px]'>
+        <FormTestPageFormModule setFormData={props.setFormData} />
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/Modules/FormTestPage/FormTestPageFormModule.tsx 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 (
+    <Form
+      layout='vertical'
+      onFinish={onFinish}
+      onFieldsChange={(changedFields) => {
+        props.setFormData((prevData: any) =>
+          changedFields.reduce(
+            (acc, { name, value }) => ({ ...acc, [name[0]]: value }),
+            prevData
+          )
+        );
+      }}
+      labelCol={{
+        style: { fontFamily: "Inter", fontWeight: 500 },
+      }}
+    >
+      <Form.Item label='Category' name={"Category"}>
+        <Select placeholder='Birthday AD' size='large'>
+          <Select.Option value='Birthday'>Birthday AD</Select.Option>
+        </Select>
+      </Form.Item>
+      <Form.Item label='Vote Title' name={"Vote Title"}>
+        <Input placeholder='Title' size='large' />
+      </Form.Item>
+      <Form.Item label='Image' name={"Image"}>
+        <div className='width-[360px] flex h-[184px] cursor-pointer items-center justify-center rounded-lg bg-[#F5F5F5]'>
+          <button className='text-[18px] opacity-45'>
+            <CameraFilled />
+          </button>
+        </div>
+      </Form.Item>
+      <Form.Item label='Description' name={"Description"}>
+        <TextArea
+          rows={6}
+          size='large'
+          placeholder='Please write down a description of the event'
+        />
+      </Form.Item>
+      <Form.Item label='Start' name={"Start date"}>
+        <DatePicker size='large' className='w-full' />
+      </Form.Item>
+      <div className='flex w-full items-center justify-center'>
+        <Button
+          size='large'
+          className='w-full'
+          type='primary'
+          htmlType='submit'
+        >
+          Create Vote
+        </Button>
+      </div>
+    </Form>
+  );
+};
diff --git a/src/components/Modules/FormTestPage/FormTestPageHeaderModule.tsx b/src/components/Modules/FormTestPage/FormTestPageHeaderModule.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import { FormPageHeaderAtom } from "~/components/Atoms/FormPageHeaderAtom/FormPageHeaderAtom";
+
+type Props = {
+  title: string;
+};
+export const FormTestPageHeaderModule = (props: Props) => {
+  return <FormPageHeaderAtom title={props.title} />;
+};
diff --git a/src/components/Templates/FormTestPage/FormTestPageTemplate.tsx b/src/components/Templates/FormTestPage/FormTestPageTemplate.tsx
@@ -0,0 +1,27 @@
+import { Layout } from "antd";
+import { Content, Header } from "antd/es/layout/layout";
+import React from "react";
+import { FormTestPageContentModule } from "~/components/Modules/FormTestPage/FormTestPageContentModule";
+import { FormTestPageHeaderModule } from "~/components/Modules/FormTestPage/FormTestPageHeaderModule";
+
+type Props = {
+  formTestPageHeaderModuleProps: React.ComponentProps<
+    typeof FormTestPageHeaderModule
+  >;
+  formTestPageFormModuleProps: React.ComponentProps<
+    typeof FormTestPageContentModule
+  >;
+};
+
+export const FormTestPageTemplate = (props: Props) => {
+  return (
+    <Layout style={{ height: "100%", width: 400, backgroundColor: "white" }}>
+      <Header style={{ padding: 0, height: 50 }}>
+        <FormTestPageHeaderModule {...props.formTestPageHeaderModuleProps} />
+      </Header>
+      <Content style={{ overflow: "auto", padding: 0 }}>
+        <FormTestPageContentModule {...props.formTestPageFormModuleProps} />
+      </Content>
+    </Layout>
+  );
+};
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:opsz@14..32&display=swap");
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -7,6 +7,8 @@ export default {
     extend: {
       fontFamily: {
         sans: ["var(--font-geist-sans)", ...fontFamily.sans],
+        inter: ["Inter", ...fontFamily.sans],
+        pretendard: ["Pretendard", ...fontFamily.sans],
       },
       spacing: {
         page: "500px",