From 81954b1625ad8c1bb9eb7c37dc46ea86d95cfa28 Mon Sep 17 00:00:00 2001
From: nelliejellie <emekaewelike@gmail.com>
Date: Wed, 2 Oct 2024 14:45:48 +0100
Subject: [PATCH 1/2] renamed page title

---
 .../testPage1/container/TestPageContainer.tsx | 30 +++++++++++++++++++
 src/app/emeka/testPage1/page.tsx              |  8 +++++
 2 files changed, 38 insertions(+)
 create mode 100644 src/app/emeka/testPage1/container/TestPageContainer.tsx
 create mode 100644 src/app/emeka/testPage1/page.tsx

diff --git a/src/app/emeka/testPage1/container/TestPageContainer.tsx b/src/app/emeka/testPage1/container/TestPageContainer.tsx
new file mode 100644
index 0000000..8488246
--- /dev/null
+++ b/src/app/emeka/testPage1/container/TestPageContainer.tsx
@@ -0,0 +1,30 @@
+"use client";
+import { useRouter } from "next/navigation";
+import { EmptyTemplate } from "~/components/Templates/Empty/EmptyTemplate";
+
+export const EmptyContainer = () => {
+  const router = useRouter();
+
+  const emptyTemplateProps: React.ComponentProps<typeof EmptyTemplate> = {
+    emptyHeaderModuleProps: {
+      headerProps: {
+        title: "Test Page 1",
+        onClickLeftIcon: () => {
+          console.log("Left icon clicked");
+          router.back();
+        },
+        onClickRightIcon: () => console.log("Right icon clicked"),
+      },
+    },
+    emptyContentModuleProps: {
+      moduleProps: "Empty Content Module",
+      componentProps: { title: "EmptyContentComponent" },
+      atomProps: { title: "EmptyContentAtom" },
+    },
+    emptyFooterModuleProps: {
+      footerProps: { title: "EmptyFooterModule" },
+    },
+  };
+
+  return <EmptyTemplate {...emptyTemplateProps} />;
+};
diff --git a/src/app/emeka/testPage1/page.tsx b/src/app/emeka/testPage1/page.tsx
new file mode 100644
index 0000000..86b2fc8
--- /dev/null
+++ b/src/app/emeka/testPage1/page.tsx
@@ -0,0 +1,8 @@
+"use client";
+import { EmptyContainer } from "./container/TestPageContainer";
+
+const Empty = () => {
+  return <EmptyContainer />;
+};
+
+export default Empty;

From 6fe0f9cc318a2a38a47617c9b72a2fd37c0b6f07 Mon Sep 17 00:00:00 2001
From: nelliejellie <emekaewelike@gmail.com>
Date: Wed, 2 Oct 2024 15:01:25 +0100
Subject: [PATCH 2/2] page design up

---
 .../testPage1/container/TestPageContainer.tsx | 55 ++++++++++------
 src/app/emeka/testPage1/page.tsx              | 21 ++++--
 .../Atoms/AvatarAtom/AvatarAtom.tsx           | 65 +++++++++++++++++++
 src/components/Atoms/LogoAtom/LogoAtom.tsx    | 24 +++++++
 .../Atoms/UseAvatar/UseAvatarAtom.tsx         | 19 ++++++
 .../Components/MessageHero/MessageHero.tsx    | 13 ++++
 .../Modules/Home/HomeLogoModule.tsx           | 16 +++++
 .../Modules/Home/HomeMessageCardModule.tsx    | 65 +++++++++++++++++++
 .../PageWithModal/PageWithModalTemplate.tsx   | 26 +++++++-
 9 files changed, 278 insertions(+), 26 deletions(-)
 create mode 100644 src/components/Atoms/AvatarAtom/AvatarAtom.tsx
 create mode 100644 src/components/Atoms/LogoAtom/LogoAtom.tsx
 create mode 100644 src/components/Atoms/UseAvatar/UseAvatarAtom.tsx
 create mode 100644 src/components/Components/MessageHero/MessageHero.tsx
 create mode 100644 src/components/Modules/Home/HomeLogoModule.tsx
 create mode 100644 src/components/Modules/Home/HomeMessageCardModule.tsx

diff --git a/src/app/emeka/testPage1/container/TestPageContainer.tsx b/src/app/emeka/testPage1/container/TestPageContainer.tsx
index 8488246..2f2c390 100644
--- a/src/app/emeka/testPage1/container/TestPageContainer.tsx
+++ b/src/app/emeka/testPage1/container/TestPageContainer.tsx
@@ -1,30 +1,47 @@
-"use client";
 import { useRouter } from "next/navigation";
-import { EmptyTemplate } from "~/components/Templates/Empty/EmptyTemplate";
+import { useState } from "react";
+import { message } from "antd";
+import { PageWithModalTemplate } from "~/components/Templates/PageWithModal/PageWithModalTemplate";
+import ModalStore from "~/store/ModalStore";
 
-export const EmptyContainer = () => {
+export const PageWithModalContainer = () => {
   const router = useRouter();
+  const [isCustomModalOpen, setIsCustomModalOpen] = useState(true);
 
-  const emptyTemplateProps: React.ComponentProps<typeof EmptyTemplate> = {
-    emptyHeaderModuleProps: {
-      headerProps: {
-        title: "Test Page 1",
-        onClickLeftIcon: () => {
-          console.log("Left icon clicked");
-          router.back();
+  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,
         },
-        onClickRightIcon: () => console.log("Right icon clicked"),
+        title: "Transaction Processing",
+        description:
+          "Uploading your transaction to the node. please wait for a moment...This may take up to 2 minutes",
       },
     },
-    emptyContentModuleProps: {
-      moduleProps: "Empty Content Module",
-      componentProps: { title: "EmptyContentComponent" },
-      atomProps: { title: "EmptyContentAtom" },
-    },
-    emptyFooterModuleProps: {
-      footerProps: { title: "EmptyFooterModule" },
+    pageInfoProps: {
+      title: "Messages",
+      sampleLinks: [],
     },
   };
 
-  return <EmptyTemplate {...emptyTemplateProps} />;
+  return <PageWithModalTemplate {...pagewithmodalTemplateProps} />;
 };
diff --git a/src/app/emeka/testPage1/page.tsx b/src/app/emeka/testPage1/page.tsx
index 86b2fc8..781fc90 100644
--- a/src/app/emeka/testPage1/page.tsx
+++ b/src/app/emeka/testPage1/page.tsx
@@ -1,8 +1,19 @@
-"use client";
-import { EmptyContainer } from "./container/TestPageContainer";
+import React from "react";
+import Image from "next/image";
 
-const Empty = () => {
-  return <EmptyContainer />;
+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 Empty;
+export default UserAvatarAtom;
diff --git a/src/components/Atoms/AvatarAtom/AvatarAtom.tsx b/src/components/Atoms/AvatarAtom/AvatarAtom.tsx
new file mode 100644
index 0000000..8f6a346
--- /dev/null
+++ b/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;
diff --git a/src/components/Atoms/LogoAtom/LogoAtom.tsx b/src/components/Atoms/LogoAtom/LogoAtom.tsx
new file mode 100644
index 0000000..1be6dd1
--- /dev/null
+++ b/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;
diff --git a/src/components/Atoms/UseAvatar/UseAvatarAtom.tsx b/src/components/Atoms/UseAvatar/UseAvatarAtom.tsx
new file mode 100644
index 0000000..781fc90
--- /dev/null
+++ b/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;
diff --git a/src/components/Components/MessageHero/MessageHero.tsx b/src/components/Components/MessageHero/MessageHero.tsx
new file mode 100644
index 0000000..a5a5fad
--- /dev/null
+++ b/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;
diff --git a/src/components/Modules/Home/HomeLogoModule.tsx b/src/components/Modules/Home/HomeLogoModule.tsx
new file mode 100644
index 0000000..65fb20c
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/components/Modules/Home/HomeMessageCardModule.tsx b/src/components/Modules/Home/HomeMessageCardModule.tsx
new file mode 100644
index 0000000..8f6a346
--- /dev/null
+++ b/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;
diff --git a/src/components/Templates/PageWithModal/PageWithModalTemplate.tsx b/src/components/Templates/PageWithModal/PageWithModalTemplate.tsx
index 96496b5..628340d 100644
--- a/src/components/Templates/PageWithModal/PageWithModalTemplate.tsx
+++ b/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>
   );
 };