Completed Vote Page

package.json

@@ -12,6 +12,9 @@
   },
   "dependencies": {
     "@ant-design/cssinjs": "^1.20.0",
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@svgr/webpack": "^8.1.0",
     "@t3-oss/env-nextjs": "^0.10.1",
     "antd": "^5.18.0",

src/app/mike/vote/container/VoteFormContainer.tsx

@@ -0,0 +1,21 @@
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { PageWithFormTemplate } from "~/components/Templates/PageWithForm/PageWithFormTemplate";
+
+export const VoteFormContainer = () => {
+  const router = useRouter();
+  const [formData, setFormData] = useState<any>({});
+
+  const pagewithformTemplateProps: React.ComponentProps<
+    typeof PageWithFormTemplate
+  > = {
+    pageWithFormHeaderModuleProps: {
+      title: "Vote",
+    },
+    pageWithFormFormModuleProps: {
+      setFormData,
+    },
+  };
+
+  return <PageWithFormTemplate {...pagewithformTemplateProps} />;
+};

src/app/mike/vote/page.tsx

@@ -0,0 +1,8 @@
+"use client";
+import { VoteFormContainer } from "./container/VoteFormContainer";
+
+const VoteForm = () => {
+  return <VoteFormContainer />;
+};
+
+export default VoteForm;

src/components/Atoms/HeaderAtom/HeaderAtom.tsx

@@ -9,26 +9,26 @@ type Props = {
 
 export const HeaderAtom = (props: Props) => {
   return (
-    <div className="relative flex h-full w-full items-center justify-center bg-[#FFC96F]">
+    <div className='relative flex h-full w-full items-center justify-center bg-[#FFFFFF]'>
       {/* Sample using custom svg */}
       {props.onClickLeftIcon && (
         <div
-          className="absolute left-0 z-[1] flex w-[50px] cursor-pointer items-center justify-center"
+          className='absolute left-0 z-[1] flex w-[50px] cursor-pointer items-center justify-center'
           onClick={props.onClickLeftIcon}
         >
-          <SVGAtom iconName="arrowLeft" width={20} height={20} color="black" />
+          <SVGAtom iconName='arrowLeft' width={20} height={20} color='black' />
         </div>
       )}
 
-      <div>{props.title}</div>
+      <div className='text-lg font-bold text-black'>{props.title}</div>
 
       {/* Sample using Antd icon */}
       {props.onClickRightIcon && (
         <div
-          className="absolute right-0 z-[1] flex w-[50px] cursor-pointer items-center justify-center"
+          className='absolute right-0 z-[1] flex w-[50px] cursor-pointer items-center justify-center'
           onClick={() => console.log("Antd icon clicked")}
         >
-          <SettingOutlined className="!text-gray-header cursor-pointer text-[20px]" />
+          <SettingOutlined className='!text-gray-header cursor-pointer text-[20px]' />
         </div>
       )}
     </div>

src/components/Modules/PageWithForm/PageWithFormFormModule.tsx

@@ -12,7 +12,11 @@ import {
   ColorPicker,
   Input,
   message,
+  Upload,
 } from "antd";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCamera } from "@fortawesome/free-solid-svg-icons";
+
 const { RangePicker } = DatePicker;
 const { TextArea } = Input;
 
@@ -30,88 +34,70 @@ export const PageWithFormFormModule = (props: Props) => {
   return (
     <Form
       form={form}
-      labelCol={{ span: 6 }}
-      wrapperCol={{ span: 14 }}
+      labelCol={{ span: 24 }}
+      wrapperCol={{ span: 24 }}
       onFieldsChange={(changedFields) => {
         props.setFormData((prevData: any) =>
           changedFields.reduce(
             (acc, { name, value }) => ({ ...acc, [name[0]]: value }),
-            prevData,
-          ),
+            prevData
+          )
         );
       }}
-      layout="horizontal"
-      style={{ maxWidth: 600 }}
+      layout='vertical'
+      style={{
+        maxWidth: 600,
+        padding: "20px 24px",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+        height: "100vh",
+      }}
       onFinish={onFinish}
+      className='bg-white font-medium'
     >
-      <Form.Item label="Radio" name="Radio">
-        <Radio.Group>
-          <Radio value="apple"> Apple </Radio>
-          <Radio value="pear"> Pear </Radio>
-        </Radio.Group>
+      <Form.Item label='Category' name='category'>
+        <Select placeholder='Birthday AD' style={{ height: "55px" }}>
+          <Select.Option value='demo'>Birthday AD</Select.Option>
+        </Select>
       </Form.Item>
-      <Form.Item label="Input" name="Input">
-        <Input />
+      <Form.Item label='Vote Title' name='title'>
+        <Input placeholder='Title' className='h-14' />
       </Form.Item>
-      <Form.Item label="Select" name="Select">
-        <Select>
-          <Select.Option value="demo">Demo</Select.Option>
-        </Select>
+      <Form.Item label='Image' name='image'>
+        <div className='flex h-44 w-full items-center justify-center rounded-lg bg-[#F5F5F5]'>
+          <Upload name='file' listType='picture-card' showUploadList={false}>
+            <FontAwesomeIcon
+              icon={faCamera}
+              className='text-xl text-gray-400'
+            />
+          </Upload>
+        </div>
       </Form.Item>
-      <Form.Item label="TreeSelect" name="TreeSelect">
-        <TreeSelect
-          treeData={[
-            {
-              title: "Light",
-              value: "light",
-              children: [{ title: "Bamboo", value: "bamboo" }],
-            },
-          ]}
+      <Form.Item label='Description' name='description'>
+        <TextArea
+          placeholder='Please write down a description of the event'
+          rows={8}
         />
       </Form.Item>
-      <Form.Item label="Cascader" name="Cascader">
-        <Cascader
-          options={[
-            {
-              value: "zhejiang",
-              label: "Zhejiang",
-              children: [
-                {
-                  value: "hangzhou",
-                  label: "Hangzhou",
-                },
-              ],
-            },
-          ]}
+      <Form.Item label='Start' name='date'>
+        <DatePicker
+          format='YYYY-MM-DD'
+          placeholder='2024-09-06'
+          className='h-14 w-full'
         />
       </Form.Item>
-      <Form.Item label="DatePicker" name="DatePicker">
-        <DatePicker />
-      </Form.Item>
-      <Form.Item label="RangePicker" name="RangePicker">
-        <RangePicker />
-      </Form.Item>
-      <Form.Item label="InputNumber" name="InputNumber">
-        <InputNumber />
-      </Form.Item>
-      <Form.Item label="TextArea" name="TextArea">
-        <TextArea rows={4} />
-      </Form.Item>
-      <Form.Item label="Switch" name="Switch" valuePropName="checked">
-        <Switch />
-      </Form.Item>
-      <Form.Item label="Button" name="Button">
-        <Button>Button</Button>
-      </Form.Item>
-      <Form.Item label="Slider" name="Slider">
-        <Slider />
-      </Form.Item>
-      <Form.Item label="ColorPicker" name="ColorPicker">
-        <ColorPicker />
-      </Form.Item>
-      <div className="flex w-full items-center justify-center">
-        <Button type="primary" htmlType="submit">
-          Submit
+
+      {/* Spacer to push the button down */}
+      <div className='flex-grow'></div>
+
+      <div className='mb-4 flex w-full items-center justify-center'>
+        <Button
+          className='min-h-14 w-full bg-[#2F54EB]'
+          type='primary'
+          htmlType='submit'
+        >
+          <p className='text-xl'>Create Vote</p>
         </Button>
       </div>
     </Form>

src/components/Modules/PageWithForm/PageWithFormHeaderModule.tsx

@@ -2,11 +2,9 @@ import { HeaderAtom } from "~/components/Atoms/HeaderAtom/HeaderAtom";
 
 type Props = {
   title: string;
-  onClickLeftIcon: () => void;
+  onClickLeftIcon?: () => void;
 };
 
 export const PageWithFormHeaderModule = (props: Props) => {
-  return (
-    <HeaderAtom title={props.title} onClickLeftIcon={props.onClickLeftIcon} />
-  );
+  return <HeaderAtom title={props.title} />;
 };

src/components/Modules/Vote/VoteBannerModule.tsx

@@ -0,0 +1,8 @@
+export const VoteBannerModule = () => {
+  return (
+    <div className='mb-4 bg-[#F0F5FF] p-2 p-5 text-left text-lg text-black'>
+      <span className='font-semibold text-blue-600'>10 FAO</span> will be
+      deducted when voting is generated (Amount : 9 FAO)
+    </div>
+  );
+};

src/components/Templates/PageWithForm/PageWithFormTemplate.tsx

@@ -1,5 +1,6 @@
 import { PageWithFormHeaderModule } from "~/components/Modules/PageWithForm/PageWithFormHeaderModule";
 import { PageWithFormFormModule } from "~/components/Modules/PageWithForm/PageWithFormFormModule";
+import { VoteBannerModule } from "~/components/Modules/Vote/VoteBannerModule";
 import { Layout } from "antd";
 import { Content, Header } from "antd/es/layout/layout";
 
@@ -14,11 +15,13 @@ type Props = {
 
 export const PageWithFormTemplate = (props: Props) => {
   return (
-    <Layout style={{ height: "100%" }}>
+    <Layout style={{ height: "100%", backgroundColor: "#FFFFFF" }}>
       <Header style={{ padding: 0, height: 50 }}>
         <PageWithFormHeaderModule {...props.pageWithFormHeaderModuleProps} />
       </Header>
       <Content style={{ overflow: "auto" }}>
+        {/* Vote Info */}
+        <VoteBannerModule />
         <PageWithFormFormModule {...props.pageWithFormFormModuleProps} />
       </Content>
     </Layout>