namu-labs-dev · B-uchi · Oct 6, 2024 · Oct 6, 2024 · Oct 6, 2024 · Oct 6, 2024
diff --git a/public/assets/block.png b/public/assets/block.png
diff --git a/public/assets/ethereum.png b/public/assets/ethereum.png
diff --git a/public/assets/history.png b/public/assets/history.png
diff --git a/public/assets/message.png b/public/assets/message.png
diff --git a/public/assets/nvir.webp b/public/assets/nvir.webp
diff --git a/public/assets/star.png b/public/assets/star.png
diff --git a/src/app/ibuchukwu/testpage1/container/Testpage1Container.tsx b/src/app/ibuchukwu/testpage1/container/Testpage1Container.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { TestPageOneMessageComponent } from "~/components/Components/TestPageOneContentComponent/TestPageOneMessageComponent";
+import { TestPageOneTemplate } from "~/components/Templates/TestPageOne/TestPageOneTemplate";
+
+export const Testpage1Container = () => {
+  const [messages, setMessages] = useState<
+    React.ComponentProps<typeof TestPageOneMessageComponent>["messages"]
+  >([]);
+  const [isCustomModalOpen, setIsCustomModalOpen] = useState(false);
+  const [toolbarColor, setToolbarColor] = useState("#1F1F1F");
+
+  useEffect(() => {
+    setToolbarColor(isCustomModalOpen ? "#000000" : "#1F1F1F");
+  }, [isCustomModalOpen]);
+
+  // Simulate fetching data for messages in the useEffect hook
+  useEffect(() => {
+    const fetchedMessages = [
+      {
+        id: 1,
+        photoUrl: "/assets/ethereum.png",
+        messageTitle: "ETH",
+        messageBody: "User: namulabs is fantasic company...",
+        receivedTime: "08:43 PM",
+        isRead: false,
+      },
+      {
+        id: 2,
+        photoUrl: "/assets/nvir.webp",
+        messageTitle: "Nvir",
+        messageBody: "User: namulabs is fantasic company...",
+        receivedTime: "08:42 AM",
+        isRead: true,
+      },
+    ];
+    setMessages(fetchedMessages);
+  }, []);
+
+  const TestPageOneTemplateProps: React.ComponentProps<
+    typeof TestPageOneTemplate
+  > = {
+    TestPageOneHeaderProps: {
+      headerProps: {
+        title: "Proxima OS",
+        color: toolbarColor,
+        onClickLeftIcon: () => {
+          console.log("Left icon clicked");
+        },
+        onClickRightIcon: () => {
+          setIsCustomModalOpen(true);
+          setToolbarColor("#000000");
+        },
+      },
+    },
+    TestPageOneContentProps: {
+      messages,
+      modalProps: {
+        modalProps: {
+          isModalOpen: isCustomModalOpen,
+          setModalOpen: setIsCustomModalOpen,
+        },
+        title: "Transaction Processing",
+        description:
+          "Uploading your transaction to the node. please wait for a moment... \nThis may take up to 2 minutes.",
+        iconUrl: "/assets/block.png",
+      },
+    },
+    TestPageOneFooterProps: {
+      footerProps: {
+        onTabChange: () => console.log(`Tab clicked.`),
+      },
+    },
+  };
+
+  return <TestPageOneTemplate {...TestPageOneTemplateProps} />;
+};
diff --git a/src/app/ibuchukwu/testpage1/page.tsx b/src/app/ibuchukwu/testpage1/page.tsx
@@ -0,0 +1,8 @@
+"use client";
+import { Testpage1Container } from "./container/Testpage1Container";
+
+const TestPage1 = () => {
+  return <Testpage1Container />;
+};
+
+export default TestPage1;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -15,12 +15,13 @@ 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]'>
+        {/* line 21: modified layout to properly accomodate test screen */}
+        <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/BottomNavAtom/BottomNavAtom.tsx b/src/components/Atoms/BottomNavAtom/BottomNavAtom.tsx
@@ -0,0 +1,53 @@
+import {
+  WalletFilled,
+  MessageFilled,
+  DollarCircleFilled,
+} from "@ant-design/icons";
+import Image from "next/image";
+
+type Props = {
+  onTabChange: () => void;
+};
+
+export const BottomNavAtom = (props: Props) => {
+  return (
+    <div className='flex h-full w-full items-center justify-center bg-[#262626]'>
+      <ul className='flex h-full w-full'>
+        <li className='flex w-1/4 cursor-pointer items-center justify-center'>
+          <button
+            onClick={props.onTabChange}
+            className='text-[24px] text-[#8C8C8C]'
+          >
+            <DollarCircleFilled twoToneColor='#8c8c8c' />
+          </button>
+        </li>
+        <li className='flex w-1/4 cursor-pointer items-center justify-center'>
+          <button
+            onClick={props.onTabChange}
+            className='text-[24px] text-[#8C8C8C]'
+          >
+            <MessageFilled color='#8C8C8C' size={24} />
+          </button>
+        </li>
+        <li className='flex w-1/4 cursor-pointer items-center justify-center border-t-[2px] border-[#00EC97]'>
+          <button
+            onClick={props.onTabChange}
+            className='text-[24px] text-[#FFFFFF]'
+          >
+            <WalletFilled color='#8C8C8C' size={24} />
+          </button>
+        </li>
+        <li className='flex w-1/4 cursor-pointer items-center justify-center'>
+          <button onClick={props.onTabChange} className='text-[24px]'>
+            <Image
+              src={"/assets/history.png"}
+              width={24}
+              height={24}
+              alt='btn icon'
+            />
+          </button>
+        </li>
+      </ul>
+    </div>
+  );
+};
diff --git a/src/components/Atoms/HeaderAtom/HeaderAtom.tsx b/src/components/Atoms/HeaderAtom/HeaderAtom.tsx
@@ -9,26 +9,28 @@ 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-[#FFC96F]'>
       {/* 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>
 
       {/* Sample using Antd icon */}
+      {/* line 30: OnCLickRightIcon already passed as prop in container*/}
       {props.onClickRightIcon && (
         <div
-          className="absolute right-0 z-[1] flex w-[50px] cursor-pointer items-center justify-center"
-          onClick={() => console.log("Antd icon clicked")}
+          className='absolute right-0 z-[1] flex w-[50px] cursor-pointer items-center justify-center'
+          // onClick={() => console.log("Antd icon clicked")}
+          onClick={props.onClickRightIcon}
         >
-          <SettingOutlined className="!text-gray-header cursor-pointer text-[20px]" />
+          <SettingOutlined className='!text-gray-header cursor-pointer text-[20px]' />
         </div>
       )}
     </div>

diff --git a/src/components/Atoms/TestPageHeaderAtom/TestPageHeaderAtom.tsx b/src/components/Atoms/TestPageHeaderAtom/TestPageHeaderAtom.tsx
@@ -0,0 +1,34 @@
+import { SettingOutlined } from "@ant-design/icons";
+import Image from "next/image";
+
+type Props = {
+  title: string;
+  color: string;
+  onClickLeftIcon: () => void;
+  onClickRightIcon: () => void;
+};
+
+export const TestPageHeaderAtom = (props: Props) => {
+  return (
+    <div
+      style={{ backgroundColor: props.color }}
+      className='flex h-full w-full items-center justify-between px-[15px] text-white'
+    >
+      <button onClick={props.onClickLeftIcon}>
+        <Image
+          src={"/assets/message.png"}
+          width={25}
+          alt='toolbar icon'
+          height={20}
+        />
+      </button>
+      <h3 className='font-pretendard text-[16px] font-[500]'>{props.title}</h3>
+      <button
+        onClick={props.onClickRightIcon}
+        className='text-[20px] text-[#BFBFBF]'
+      >
+        <SettingOutlined />
+      </button>
+    </div>
+  );
+};
diff --git a/src/components/Components/TestPageOneContentComponent/TestPageOneMessageComponent.tsx b/src/components/Components/TestPageOneContentComponent/TestPageOneMessageComponent.tsx
@@ -0,0 +1,54 @@
+import Image from "next/image";
+
+interface Message {
+  id: number;
+  photoUrl: string;
+  messageTitle: string;
+  messageBody: string;
+  receivedTime: string;
+  isRead: boolean;
+}
+
+type Props = {
+  messages: Message[];
+};
+
+export const TestPageOneMessageComponent = (props: Props) => {
+  return (
+    <div className='mt-5 flex h-full flex-col gap-5 rounded-t-3xl bg-[#2C2D30] px-[24px] pt-[30px]'>
+      {props.messages.map((message) => (
+        <div key={message.id} className='flex cursor-pointer gap-5'>
+          <div className=''>
+            <Image
+              src={message.photoUrl}
+              alt='message profile'
+              className='shadow-custom rounded-full'
+              width={44}
+              height={44}
+            />
+          </div>
+          <div className='w-full'>
+            <div className='flex items-center justify-between'>
+              <h2 className='font-pretendard text-[16px] font-[700] text-white'>
+                {message.messageTitle}
+              </h2>
+              <p className='font-inter text-[14px] text-white'>
+                {message.receivedTime}
+              </p>
+            </div>
+            <div className='flex items-center justify-between'>
+              <p className='font-inter line-clamp-1 w-[85%] text-[14px] text-[#BFBFBF]'>
+                {message.messageBody}
+              </p>
+              {!message.isRead && (
+                <div className='font-pretendard h-[20px] w-[20px] rounded-full bg-red-500 text-center font-[12px] text-white'>
+                  N
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
diff --git a/src/components/Components/TestPageOneLoadingModal/TestPageOneLoadingModal.tsx b/src/components/Components/TestPageOneLoadingModal/TestPageOneLoadingModal.tsx
@@ -0,0 +1,25 @@
+import Image from "next/image";
+import Modal from "~/components/Atoms/Modal/Modal";
+
+type Props = {
+  modalProps: React.ComponentProps<typeof Modal>;
+  title: string;
+  description: string;
+  iconUrl: string;
+};
+
+export const TestPageOneLoadingModal = (props: Props) => {
+  return (
+    <Modal {...props.modalProps}>
+      <div className='flex h-fit w-[340px] flex-col items-center gap-4 bg-[#2C2D30] p-8 text-white'>
+        <h1 className='font-inter whitespace-pre-wrap text-[24px] font-[700]'>
+          {props.title}
+        </h1>
+        <Image height={100} width={267} src={props.iconUrl} alt='block icon' />
+        <p className='font-pretendard whitespace-pre-wrap text-center text-[16px] leading-[26px]'>
+          {props.description}
+        </p>
+      </div>
+    </Modal>
+  );
+};
diff --git a/src/components/Modules/TestPageOne/TestPageOneContentModule.tsx b/src/components/Modules/TestPageOne/TestPageOneContentModule.tsx
@@ -0,0 +1,37 @@
+import Image from "next/image";
+import { TestPageOneMessageComponent } from "~/components/Components/TestPageOneContentComponent/TestPageOneMessageComponent";
+import { TestPageOneLoadingModal } from "~/components/Components/TestPageOneLoadingModal/TestPageOneLoadingModal";
+
+type Props = {
+  messages: React.ComponentProps<
+    typeof TestPageOneMessageComponent
+  >["messages"];
+  modalProps: React.ComponentProps<typeof TestPageOneLoadingModal>;
+};
+
+export const TestPageOneContentModule = (props: Props) => {
+  return (
+    <div className='flex h-full flex-col'>
+      <div className='px-[20px]'>
+        <h1 className='font-inter text-[28px] font-[600] text-white'>
+          Messages
+        </h1>
+        <div className='mt-5 w-[65px]'>
+          <div className='flex h-[65px] items-center justify-center rounded-full bg-[#2C2D30]'>
+            <Image
+              src={"/assets/star.png"}
+              alt='star icon'
+              width={46}
+              height={46}
+            />
+          </div>
+          <p className='font-inter text-center text-[16px] text-white'>
+            Proxima
+          </p>
+        </div>
+      </div>
+      <TestPageOneMessageComponent messages={props.messages} />
+      <TestPageOneLoadingModal {...props.modalProps} />
+    </div>
+  );
+};
diff --git a/src/components/Modules/TestPageOne/TestPageOneFooterModule.tsx b/src/components/Modules/TestPageOne/TestPageOneFooterModule.tsx
@@ -0,0 +1,9 @@
+import { BottomNavAtom } from "~/components/Atoms/BottomNavAtom/BottomNavAtom";
+
+type Props = {
+  footerProps: React.ComponentProps<typeof BottomNavAtom>;
+};
+
+export const TestPageOneFooterModule = (props: Props) => {
+  return <BottomNavAtom {...props.footerProps} />;
+};
diff --git a/src/components/Modules/TestPageOne/TestPageOneHeaderModule.tsx b/src/components/Modules/TestPageOne/TestPageOneHeaderModule.tsx
@@ -0,0 +1,9 @@
+import { TestPageHeaderAtom } from "~/components/Atoms/TestPageHeaderAtom/TestPageHeaderAtom";
+
+type Props = {
+  headerProps: React.ComponentProps<typeof TestPageHeaderAtom>;
+};
+
+export const TestPageOneHeaderModule = (props: Props) => {
+  return <TestPageHeaderAtom {...props.headerProps} />;
+};