Philip testPage1 Completed

public/svgs/index.ts

@@ -3,3 +3,9 @@ export { default as copy } from "./copy.svg";
 export { default as control } from "./control.svg";
 export { default as arrowLeft } from "./arrowLeft.svg";
 export { default as outLink } from "./outLink.svg";
+export { default as dollarCircle } from "./dollarCircle.svg";
+export { default as message } from "./message.svg";
+export { default as wallet } from "./wallet.svg";
+export { default as history } from "./history.svg";
+export { default as home } from "./home.svg";
+export { default as setting } from "./setting.svg";

src/app/philip/testPage1/container/PhilipContainer.tsx

@@ -0,0 +1,114 @@
+"use client";
+import { Layout } from "antd";
+import { Content, Footer, Header } from "antd/es/layout/layout";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import DrawerAtom from "~/components/Atoms/DrawerAtom/DrawerAtom";
+import { PhilipTransactionAtom } from "~/components/Atoms/EmptyContentAtom/PhilipTransactionAtom";
+import { PhilipFooterAtom } from "~/components/Atoms/FooterAtom/PhilipFooterAtom";
+import { PhilipHeaderAtom } from "~/components/Atoms/HeaderAtom/PhilipHeaderAtom";
+import Modal from "~/components/Atoms/Modal/Modal";
+
+export const PhilipContainer = () => {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
+  return (
+    <Layout style={{ height: "100%" }}>
+      <Header style={{ padding: 0, height: 50 }}>
+        <PhilipHeaderAtom
+          title='Proxima 0S'
+          onClickLeftIcon={() => alert("Left icon clicked.")}
+          onClickRightIcon={() => alert("Settings icon clicked.")}
+        />
+      </Header>
+      <Content
+        style={{
+          overflow: "auto",
+          paddingLeft: "25px",
+          paddingRight: "25px",
+          paddingTop: "16px",
+          paddingBottom: "16px",
+          gap: "20px",
+          display: "flex",
+          flexDirection: "column",
+          backgroundColor: "#1F1F1F",
+        }}
+      >
+        <div className='flex flex-col gap-y-[19px] text-white'>
+          <h3 className='leading-[33.89px text-[28px] font-semibold'>
+            Messages
+          </h3>
+          <div className='flex flex-row'>
+            <div className='flex w-[20%] flex-col gap-y-[9px]'>
+              <div className='flex aspect-[1/1] w-full items-center justify-center rounded-full bg-[#2C2D30]'>
+                <div className='relative aspect-[1/1] w-[70.77%]'>
+                  <Image
+                    src={"/svgs/star.svg"}
+                    fill
+                    className='h-full w-full'
+                    alt='Proxima'
+                  />
+                </div>
+              </div>
+              <p className='text-center text-[16px] leading-[19.36px]'>
+                Proxima
+              </p>
+            </div>
+          </div>
+        </div>
+        <DrawerAtom
+          isDrawerOpen={isDrawerOpen}
+          setIsDrawerOpen={setIsDrawerOpen}
+          containerClassName='!h-[71.2%] !bg-[#2C2D30] p-5'
+        >
+          <PhilipTransactionAtom
+            logo='/eth.png'
+            token='ETH'
+            message='User: namulabs is fantasic company'
+            time='8:43 PM'
+            initial='N'
+            onClick={() => setModalOpen(true)}
+          />
+          <PhilipTransactionAtom
+            logo='/nvir.png'
+            token='Nvir'
+            message='User: namulabs is fantasic company'
+            time='8:42 PM'
+            onClick={() => setModalOpen(true)}
+          />
+        </DrawerAtom>
+        <Modal
+          containerClassName='p-5 !bg-[#2C2D30] rounded-[14px] flex flex-col gap-y-3 text-white max-w-[340px]'
+          isModalOpen={modalOpen}
+          setModalOpen={setModalOpen}
+        >
+          <h3 className='text-center text-[24px] leading-[31px]'>
+            Transaction
+            <br /> processing
+          </h3>
+          <div className='relative mx-auto h-[154px] w-[267px]'>
+            <Image
+              src='/blocks.png'
+              fill
+              className='h-full w-full object-cover'
+              alt='Blockchain'
+            />
+          </div>
+          <p className='text- text-center'>
+            Uploading your transaction to the node. please wait for a moment...
+            <br /> This may take up to 2 minutes.
+          </p>
+        </Modal>
+      </Content>
+      <Footer style={{ padding: 0, minHeight: 50, zIndex: 9999 }}>
+        <PhilipFooterAtom
+          drawerProps={{
+            isDrawerOpen,
+            setIsDrawerOpen,
+          }}
+        />
+      </Footer>
+    </Layout>
+  );
+};

src/app/philip/testPage1/page.tsx

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

src/app/sample/pageWithDrawer/container/PageWithDrawerContainer.tsx

@@ -1,8 +1,11 @@
+"use client";
 import { useState } from "react";
 import { PageWithDrawerTemplate } from "~/components/Templates/PageWithDrawer/PageWithDrawerTemplate";
 import DrawerStore from "~/store/DrawerStore";
 
 export const PageWithDrawerContainer = () => {
+  //  Since this page uses useState(), it is now a client component and a
+  //  'use client' header has been added to the top of the page.
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
 
   const pagewithdrawerTemplateProps: React.ComponentProps<

src/components/Atoms/EmptyContentAtom/PhilipTransactionAtom.tsx

@@ -0,0 +1,48 @@
+import Image from "next/image";
+
+type Props = {
+  logo: string;
+  token: string;
+  message: string;
+  time: string;
+  initial?: string;
+  onClick: () => void;
+};
+
+export const PhilipTransactionAtom = (props: Props) => {
+  return (
+    <div
+      onClick={props.onClick}
+      className='flex w-full flex-row gap-x-2.5 px-3.5 pb-[15px] pt-[13px]'
+    >
+      <div className='relative aspect-[1/1] w-11 min-w-11'>
+        <Image
+          src={props.logo}
+          fill
+          className='h-full w-full'
+          alt={props.token}
+        />
+      </div>
+      <div className='flex flex-grow flex-col'>
+        <div className='flex flex-row justify-between text-white'>
+          <h4 className='text-[16px] font-bold leading-[26px]'>
+            {props.token}
+          </h4>
+          <p className='text-[14px] leading-[16.94px]'>{props.time}</p>
+        </div>
+        <div className='flex w-full flex-row justify-between gap-x-4'>
+          <p className='block w-[240px] flex-1 truncate text-start text-[14px] font-medium leading-[22px] text-[#BFBFBF]'>
+            {props.message}
+          </p>
+          {props.initial && props.initial.length > 0 && (
+            <div className='h-5 w-5 rounded-full bg-[#FF4D4F]'>
+              <p className='text-[12px] uppercase leading-[20px] text-white'>
+                {props.initial[0]}
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/Atoms/FooterAtom/PhilipFooterAtom.tsx

@@ -0,0 +1,59 @@
+import SVGAtom from "../SVGAtom/SVGAtom";
+
+type Props = {
+  drawerProps: {
+    isDrawerOpen: boolean;
+    setIsDrawerOpen: (value: boolean) => void;
+  };
+};
+
+interface FooterTabItem {
+  link: string;
+  icon: "dollarCircle" | "message" | "wallet" | "history";
+}
+
+const tabItems: FooterTabItem[] = [
+  {
+    link: "/",
+    icon: "dollarCircle",
+  },
+  {
+    link: "/",
+    icon: "message",
+  },
+  {
+    link: "/",
+    icon: "wallet",
+  },
+  {
+    link: "/",
+    icon: "history",
+  },
+];
+
+export const PhilipFooterAtom = (props: Props) => {
+  return (
+    <div className='flex h-[60px] items-center justify-center bg-[#262626]'>
+      <div className='flex h-full w-full flex-row'>
+        <div className={`flex flex-1 items-center justify-center`}>
+          <SVGAtom iconName='dollarCircle' className='aspect-[1/1] w-6' />
+        </div>
+        <div
+          onClick={() => props.drawerProps.setIsDrawerOpen(false)}
+          className={`flex flex-1 items-center justify-center ${!props.drawerProps.isDrawerOpen && "border-t-2 border-t-[#00EC97]"}`}
+        >
+          <SVGAtom iconName='message' className='aspect-[1/1] w-6' />
+        </div>
+        <div
+          onClick={() => props.drawerProps.setIsDrawerOpen(true)}
+          className={`flex flex-1 items-center justify-center ${props.drawerProps.isDrawerOpen && "border-t-2 border-t-[#00EC97]"}`}
+        >
+          <SVGAtom iconName='wallet' className='aspect-[1/1] w-6' />
+        </div>
+        <div className={`flex flex-1 items-center justify-center`}>
+          <SVGAtom iconName='history' className='aspect-[1/1] w-6' />
+        </div>
+      </div>
+    </div>
+  );
+};