Emeka test page2

src/app/emeka/testPage1/container/TestPageContainer.tsx

@@ -0,0 +1,47 @@
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { message } from "antd";
+import { PageWithModalTemplate } from "~/components/Templates/PageWithModal/PageWithModalTemplate";
+import ModalStore from "~/store/ModalStore";
+
+export const PageWithModalContainer = () => {
+  const router = useRouter();
+  const [isCustomModalOpen, setIsCustomModalOpen] = useState(true);
+
+  const headerRightIconClicked = () => {
+    void message.info("can't go to Settings");
+  };
+  const pagewithmodalTemplateProps: React.ComponentProps<
+    typeof PageWithModalTemplate
+  > = {
+    pageWithModalHeaderModuleProps: {
+      title: "Proxima OS",
+      onClickLeftIcon: () => router.back(),
+      onClickRightIcon: headerRightIconClicked,
+    },
+    pageWithModalContentModuleProps: {
+      onOpenSnapshotModal: () =>
+        ModalStore.open("TitleAndContent", {
+          TitleAndContent: {
+            title: "Modal Title",
+            description: "Modal Content",
+          },
+        }),
+      modalProps: {
+        modalProps: {
+          isModalOpen: isCustomModalOpen,
+          setModalOpen: setIsCustomModalOpen,
+        },
+        title: "Transaction Processing",
+        description:
+          "Uploading your transaction to the node. please wait for a moment...This may take up to 2 minutes",
+      },
+    },
+    pageInfoProps: {
+      title: "Messages",
+      sampleLinks: [],
+    },
+  };
+
+  return <PageWithModalTemplate {...pagewithmodalTemplateProps} />;
+};

src/app/emeka/testPage1/page.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import Image from "next/image";
+
+interface AvatarProps {
+  size?: number;
+  user: string;
+}
+
+const UserAvatarAtom: React.FC<AvatarProps> = ({ user, size = 20 }) => {
+  return (
+    <div
+      className={`ml-[50%] flex size-6 items-center justify-center rounded-full  bg-[#FF4D4F] text-center`}
+    >
+      <p>{user}</p>
+    </div>
+  );
+};
+
+export default UserAvatarAtom;

src/app/emeka/testPage1/testPage2/Page.tsx

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

src/app/emeka/testPage1/testPage2/container/PageWithFormContainer.tsx

@@ -0,0 +1,25 @@
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { message } from "antd";
+import { PageWithFormTemplate } from "~/components/Templates/PageWithForm/PageWithFormTemplate";
+
+export const PageWithFormContainer = () => {
+  const router = useRouter();
+  const [formData, setFormData] = useState<any>({});
+
+  const headerRightIconClicked = () => {
+    void message.info("can't go to Settings");
+  };
+  const pagewithformTemplateProps: React.ComponentProps<
+    typeof PageWithFormTemplate
+  > = {
+    pageWithFormHeaderModuleProps: {
+      title: "Vote",
+    },
+    pageWithFormFormModuleProps: {
+      setFormData,
+    },
+  };
+
+  return <PageWithFormTemplate {...pagewithformTemplateProps} />;
+};

src/components/Atoms/AvatarAtom/AvatarAtom.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import AvatarAtom from "~/components/Atoms/AvatarAtom/AvatarAtom";
+import UserAvatar from "~/components/Atoms/UserAvatar/UserAvaterAtom";
+
+interface MessageCardProps {
+  size: string;
+}
+
+interface CardListProp {
+  exchange: string;
+  message: string;
+  user: string;
+  timeStamp: string;
+  src: string;
+}
+
+const CardList: CardListProp[] = [
+  {
+    exchange: "ETH",
+    message: "User: namulabs is fantasic company...",
+    user: "N",
+    timeStamp: "08:43",
+    src: "eth.svg",
+  },
+  {
+    exchange: "Nvir",
+    message: "User: namulabs is fantasic company...",
+    user: "N",
+    timeStamp: "08:42",
+    src: "nvr.svg",
+  },
+];
+
+const HomeMessageCardModule: React.FC<MessageCardProps> = ({ size }) => {
+  const textSize =
+    size === "lg" ? "text-lg font-bold" : "text-sm text-gray-400";
+  return (
+    <div className='h-full rounded-t-3xl bg-[#2C2D30] p-10'>
+      {CardList.map((cardList, idx) => (
+        <div
+          key={idx}
+          className='mb-2 flex items-center justify-between rounded-md  p-4'
+        >
+          <div className='flex items-center'>
+            <AvatarAtom
+              src={cardList.src}
+              size={cardList.src === "nvr.svg " ? 80 : 40}
+              alt=''
+            />
+            <div className='ml-4'>
+              <h1 className='font-bold text-white'>{cardList.exchange}</h1>
+              <p className='text-sm text-gray-400'>{cardList.message}</p>
+            </div>
+          </div>
+          <div className='flex flex-col justify-end gap-y-2'>
+            <p className='text-sm text-white'>{`${cardList.timeStamp}PM`}</p>
+            <UserAvatar user={cardList.user} />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default HomeMessageCardModule;

src/components/Atoms/LogoAtom/LogoAtom.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import Image from "next/image";
+
+interface LogoProps {
+  alt: string;
+  size?: number;
+}
+
+const Logo: React.FC<LogoProps> = ({ alt, size = 40 }) => {
+  return (
+    <div className={`w-${size} h-${size}  overflow-hidden`}>
+      <Image
+        src='/svgs/logo.svg'
+        alt={alt}
+        width={size}
+        height={size}
+        className=''
+      />
+      <p className='mt-2 pl-[2%] text-lg text-white'>Proxima</p>
+    </div>
+  );
+};
+
+export default Logo;

src/components/Atoms/UseAvatar/UseAvatarAtom.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import Image from "next/image";
+
+interface AvatarProps {
+  size?: number;
+  user: string;
+}
+
+const UserAvatarAtom: React.FC<AvatarProps> = ({ user, size = 20 }) => {
+  return (
+    <div
+      className={`ml-[50%] flex size-6 items-center justify-center rounded-full  bg-[#FF4D4F] text-center`}
+    >
+      <p>{user}</p>
+    </div>
+  );
+};
+
+export default UserAvatarAtom;

src/components/Components/MessageHero/MessageHero.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import Logo from "~/components/Atoms/LogoAtom/LogoAtom";
+
+const MessageHero = () => {
+  return (
+    <div>
+      <h1 className='mb-4 text-2xl font-bold text-white'>Messages</h1>
+      <Logo alt='logo' size={80} />
+    </div>
+  );
+};
+
+export default MessageHero;

src/components/Modules/Home/HomeLogoModule.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { LinkList } from "~/components/Components/LinkList/LinkList";
+import MessageHero from "~/components/Components/MessagesHero/MessageHero";
+
+type Props = {
+  title: string;
+  sampleLinks: string[];
+};
+
+export const HomeLogoModule = (props: Props) => {
+  return (
+    <div className='bg-[#1F1F1F] py-3'>
+      <MessageHero />
+    </div>
+  );
+};

src/components/Modules/Home/HomeMessageCardModule.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import AvatarAtom from "~/components/Atoms/AvatarAtom/AvatarAtom";
+import UserAvatar from "~/components/Atoms/UserAvatar/UserAvaterAtom";
+
+interface MessageCardProps {
+  size: string;
+}
+
+interface CardListProp {
+  exchange: string;
+  message: string;
+  user: string;
+  timeStamp: string;
+  src: string;
+}
+
+const CardList: CardListProp[] = [
+  {
+    exchange: "ETH",
+    message: "User: namulabs is fantasic company...",
+    user: "N",
+    timeStamp: "08:43",
+    src: "eth.svg",
+  },
+  {
+    exchange: "Nvir",
+    message: "User: namulabs is fantasic company...",
+    user: "N",
+    timeStamp: "08:42",
+    src: "nvr.svg",
+  },
+];
+
+const HomeMessageCardModule: React.FC<MessageCardProps> = ({ size }) => {
+  const textSize =
+    size === "lg" ? "text-lg font-bold" : "text-sm text-gray-400";
+  return (
+    <div className='h-full rounded-t-3xl bg-[#2C2D30] p-10'>
+      {CardList.map((cardList, idx) => (
+        <div
+          key={idx}
+          className='mb-2 flex items-center justify-between rounded-md  p-4'
+        >
+          <div className='flex items-center'>
+            <AvatarAtom
+              src={cardList.src}
+              size={cardList.src === "nvr.svg " ? 80 : 40}
+              alt=''
+            />
+            <div className='ml-4'>
+              <h1 className='font-bold text-white'>{cardList.exchange}</h1>
+              <p className='text-sm text-gray-400'>{cardList.message}</p>
+            </div>
+          </div>
+          <div className='flex flex-col justify-end gap-y-2'>
+            <p className='text-sm text-white'>{`${cardList.timeStamp}PM`}</p>
+            <UserAvatar user={cardList.user} />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default HomeMessageCardModule;

src/components/Templates/PageWithModal/PageWithModalTemplate.tsx

@@ -3,6 +3,9 @@ import { Content, Header } from "antd/es/layout/layout";
 import { PageWithModalHeaderModule } from "~/components/Modules/PageWithModal/PageWithModalHeaderModule";
 import { PageWithModalContentModule } from "~/components/Modules/PageWithModal/PageWithModalContentModule";
 import { PageWithModalDescriptionModule } from "~/components/Modules/PageWithModalDescription/PageWithModalDescriptionModule";
+import { HomeFooterModule } from "~/components/Modules/Home/HomeFooterModule";
+import HomeMessageCardModule from "~/components/Modules/Home/HomeMessageCardModule";
+import { HomeLogoModule } from "~/components/Modules/Home/HomeLogoModule";
 
 type Props = {
   pageWithModalHeaderModuleProps: React.ComponentProps<
@@ -11,6 +14,7 @@ type Props = {
   pageWithModalContentModuleProps: React.ComponentProps<
     typeof PageWithModalContentModule
   >;
+  pageInfoProps: React.ComponentProps<typeof HomeLogoModule>;
 };
 
 export const PageWithModalTemplate = (props: Props) => {
@@ -19,21 +23,39 @@ export const PageWithModalTemplate = (props: Props) => {
       <Header style={{ padding: 0, height: 50 }}>
         <PageWithModalHeaderModule {...props.pageWithModalHeaderModuleProps} />
       </Header>
-
+      <Content
+        style={{
+          backgroundColor: "#1F1F1F",
+          overflow: "auto",
+          padding: "20px",
+        }}
+      >
+        <HomeLogoModule {...props.pageInfoProps} />
+      </Content>
       <Content
         style={{
           overflow: "auto",
           padding: "20px",
           gap: "20px",
           display: "flex",
+          backgroundColor: "#1F1F1F",
           flexDirection: "column",
         }}
       >
-        <PageWithModalDescriptionModule />
         <PageWithModalContentModule
           {...props.pageWithModalContentModuleProps}
         />
       </Content>
+
+      <Content
+        style={{
+          backgroundColor: "#1F1F1F",
+          overflow: "auto",
+        }}
+      >
+        <HomeMessageCardModule size='' />
+      </Content>
+      <HomeFooterModule title='' />
     </Layout>
   );
 };