From 3465cc1b5bbb354261fabe4b253650367e65feba Mon Sep 17 00:00:00 2001
From: Nwokedi Philip <philippos764@gmail.com>
Date: Sun, 6 Oct 2024 19:56:34 +0100
Subject: [PATCH 1/2] chore: testPage1

---
 public/blocks.png                             | Bin 0 -> 19797 bytes
 public/eth.png                                | Bin 0 -> 3461 bytes
 public/nvir.png                               | Bin 0 -> 1081 bytes
 public/svgs/dollarCircle.svg                  |   3 +
 public/svgs/history.svg                       |   3 +
 public/svgs/home.svg                          |   4 +
 public/svgs/index.ts                          |   6 +
 public/svgs/message.svg                       |   3 +
 public/svgs/setting.svg                       |  10 ++
 public/svgs/star.svg                          |  11 ++
 public/svgs/wallet.svg                        |   3 +
 .../testPage1/container/PhilipContainer.tsx   | 114 ++++++++++++++++++
 src/app/philip/testPage1/page.tsx             |   8 ++
 .../container/PageWithDrawerContainer.tsx     |   3 +
 .../PhilipTransactionAtom.tsx                 |  48 ++++++++
 .../Atoms/FooterAtom/PhilipFooterAtom.tsx     |  59 +++++++++
 .../Atoms/HeaderAtom/PhilipHeaderAtom.tsx     |  38 ++++++
 17 files changed, 313 insertions(+)
 create mode 100644 public/blocks.png
 create mode 100644 public/eth.png
 create mode 100644 public/nvir.png
 create mode 100644 public/svgs/dollarCircle.svg
 create mode 100644 public/svgs/history.svg
 create mode 100644 public/svgs/home.svg
 create mode 100644 public/svgs/message.svg
 create mode 100644 public/svgs/setting.svg
 create mode 100644 public/svgs/star.svg
 create mode 100644 public/svgs/wallet.svg
 create mode 100644 src/app/philip/testPage1/container/PhilipContainer.tsx
 create mode 100644 src/app/philip/testPage1/page.tsx
 create mode 100644 src/components/Atoms/EmptyContentAtom/PhilipTransactionAtom.tsx
 create mode 100644 src/components/Atoms/FooterAtom/PhilipFooterAtom.tsx
 create mode 100644 src/components/Atoms/HeaderAtom/PhilipHeaderAtom.tsx

diff --git a/public/blocks.png b/public/blocks.png
new file mode 100644
index 0000000000000000000000000000000000000000..ada0d8c49153bdd9e2ccbad14babbff8c8162ec5
GIT binary patch
literal 19797
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
ULTccDnZmoJtf5q@V2=6!0GitMX#fBK

literal 0
HcmV?d00001

diff --git a/public/eth.png b/public/eth.png
new file mode 100644
index 0000000000000000000000000000000000000000..a3c324cc4edfa0300121c69c0f5756b62e8f55c5
GIT binary patch
literal 3461
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

literal 0
HcmV?d00001

diff --git a/public/nvir.png b/public/nvir.png
new file mode 100644
index 0000000000000000000000000000000000000000..54a1a912dfde36118877ea8b0e0b500f1b05213e
GIT binary patch
literal 1081
zcmV-91jhS`P)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF000C4Nkl<ZcwX(B
zO=uHA6vqoqz>}zGy$IsXg9Smsn+S@KRFPVXh>Dl`31aQViXQAiP&`OI6|{IztBAMa
zp=zyP2cbdKdQuQAh$xtB6K$J*WZaj!$>u+^yEB{3X0!1Rzf0f8y!UpR%qE+L2A>p-
zr%p%WDNTntpph@e*PI$-scVAfTtT@oe=ya~8nJk<p*3*X>MNF6frVBYS`*9gU6FWl
z2n+L{<Pg?Xd2L`(zL4rdHDQ?*QDZ!H9TyJ@R2$aosiJYM0~ZY%R3p~yiS*>dxLAN0
z#`?>Wo^VXCNYEL>K3pkMTUQ<_Zzn`!$>V~gH3jv6eMw1wMZJN^Y8C1Q`?Hr1M_Rv8
zIznS`SinAo3dZraQb-(|`Jixt{g!HbrU?VW2K9(-7lh7X1^Zsm78XIrutL3J`=Pn|
zgOA^`L?XeKw*BI4X0U(H2C(MP1ZzH)X3N_(&SqxuZjG%wk}hG{9{U&>sChH3=f^o8
z0-Nte2U!;FOfe_T%rY*H5D9%$!2zJ%M6Y=OXq3W@%<-LllW6AFPyw5F7(j6spuve%
z`zNq&C7E-f-h7(l)>B2MdBW8I)^?QFydfiBcfYs0Kn0`uE;QI-CECvDOY}XQM%RL@
zaz1}Q%jIz*J(=VFCP5bsK<4YJJhz9lSZiMBCqks=qv^cu;@v4Uaq)JTHU4v+v)iC4
zZGY622h*I79bbRUV+zaMB#ala@njmqI3GKt2O!$Y=pzGa)2W4Bu%t~x6BjE2mCMP+
z8AuNRb>Q+J&PN8+=kLWWi<+CaZ)W|8@~%GNdH`sbB{P-7R0UhpUbS5y68bpd`v6{j
zn8j2jcGP56{OV3eZq&VJS<cT1-v{tgaR4ODq2lL6;08dTl9|$7u=*f>^#@<iaCu~?
zi2;yQ>?%kfgivUg<-)BgHZYPcVD*1168-)Diy8bg+t!`o;w8x+grttbD71Uc$UA<g
ztQ5RUkT6z(F6o;g6xu6+j9Pnsb8)gL-3_A9F3X+4F*Z7yC}4NnI{I-Am*s>pDpX|v
z1Ns0|KD4mYzDw?}K4Bh!<40mBw9BG8fG>g@C`0J0Nbw`Fe?vfr5>RNDMRfp#Na&+V
zN%JxTxcMks0@`KS-1&{|I6Gco*E#X0w#e2qnf$sPSKZx&A=v-_FGfh{7*??FqU!z2
zQ4$7(4eXaw-9I2f;se70_GzsUz9U$^@>?lXkIA*9`msML)%Amth9dR+sH~w#JwGgM
zNKg1wut-qx=E|d@G3~Hmu|PpJV%?r9$nOs74@J9G0M7}^@AF<L(vo_Dh4_wM1J>og
zs`0}~r@OkU$cNt<C_VRIP1Wa*r)?C}pU?jVO_JQhUNM|S00000NkvXXu0mjf()J40

literal 0
HcmV?d00001

diff --git a/public/svgs/dollarCircle.svg b/public/svgs/dollarCircle.svg
new file mode 100644
index 0000000..7739135
--- /dev/null
+++ b/public/svgs/dollarCircle.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 1.5C6.20156 1.5 1.5 6.20156 1.5 12C1.5 17.7984 6.20156 22.5 12 22.5C17.7984 22.5 22.5 17.7984 22.5 12C22.5 6.20156 17.7984 1.5 12 1.5ZM12.5227 17.0906L12.5273 17.8336C12.5273 17.9367 12.443 18.0234 12.3398 18.0234H11.6742C11.5711 18.0234 11.4867 17.9391 11.4867 17.8359V17.1C9.40547 16.9453 8.42578 15.7594 8.32031 14.4703C8.31094 14.3602 8.39766 14.2664 8.50781 14.2664H9.59063C9.68203 14.2664 9.76172 14.332 9.77578 14.4211C9.89531 15.1641 10.4742 15.7195 11.5125 15.8578V12.5133L10.9336 12.3656C9.70781 12.0727 8.54063 11.3086 8.54063 9.72422C8.54063 8.01563 9.83906 7.09688 11.4984 6.93516V6.16172C11.4984 6.05859 11.5828 5.97422 11.6859 5.97422H12.3445C12.4477 5.97422 12.532 6.05859 12.532 6.16172V6.92813C14.1375 7.08984 15.3422 8.02734 15.4828 9.4875C15.4945 9.59766 15.4078 9.69375 15.2953 9.69375H14.243C14.1492 9.69375 14.0695 9.62344 14.0578 9.53203C13.9641 8.84766 13.4156 8.28984 12.5227 8.16797V11.3156L13.118 11.4539C14.6367 11.8289 15.6703 12.5555 15.6703 14.182C15.6703 15.9469 14.3578 16.9313 12.5227 17.0906ZM9.99844 9.61641C9.99844 10.2117 10.3664 10.6734 11.1586 10.9594C11.2688 11.0039 11.3789 11.0391 11.5102 11.0766V8.17031C10.6453 8.28047 9.99844 8.76563 9.99844 9.61641ZM12.7289 12.7852C12.6633 12.7711 12.5977 12.7547 12.5227 12.7336V15.8672C13.5211 15.7781 14.2102 15.2297 14.2102 14.3109C14.2102 13.5914 13.8375 13.1227 12.7289 12.7852Z" fill="#8C8C8C"/>
+</svg>
diff --git a/public/svgs/history.svg b/public/svgs/history.svg
new file mode 100644
index 0000000..5d26595
--- /dev/null
+++ b/public/svgs/history.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6449 5.59659H11.3565C11.2386 5.59659 11.1422 5.69302 11.1422 5.81088V13.185C11.1422 13.2546 11.1743 13.3189 11.2306 13.3591L15.6583 16.5921C15.7547 16.6618 15.8886 16.643 15.9583 16.5466L16.7243 15.5019C16.7967 15.4028 16.7752 15.2689 16.6788 15.2019L12.8592 12.4403V5.81088C12.8592 5.69302 12.7627 5.59659 12.6449 5.59659ZM18.5324 7.61088L22.7324 8.63677C22.8663 8.66891 22.9976 8.56713 22.9976 8.43052L23.019 4.10463C23.019 3.92516 22.8127 3.82338 22.6735 3.93588L18.452 7.2332C18.4201 7.25788 18.3958 7.29106 18.3819 7.32894C18.3681 7.36681 18.3651 7.40783 18.3735 7.44728C18.3819 7.48674 18.4013 7.52302 18.4294 7.55196C18.4575 7.5809 18.4932 7.60132 18.5324 7.61088ZM23.0243 15.6761L21.5056 15.1537C21.4526 15.1356 21.3947 15.1389 21.3441 15.1629C21.2936 15.1869 21.2544 15.2298 21.2351 15.2823C21.1842 15.4189 21.1306 15.5528 21.0743 15.6868C20.5976 16.8144 19.9145 17.8296 19.0413 18.7002C18.1778 19.5664 17.1544 20.2568 16.0279 20.7332C14.8609 21.2266 13.6065 21.4798 12.3395 21.4778C11.0592 21.4778 9.81898 21.2287 8.65113 20.7332C7.52462 20.2568 6.50125 19.5664 5.63773 18.7002C4.7672 17.8296 4.08416 16.8144 3.6047 15.6868C3.11403 14.5191 2.86264 13.2649 2.86541 11.9984C2.86541 10.718 3.11452 9.47516 3.61005 8.3073C4.08684 7.17963 4.76988 6.16445 5.64309 5.29391C6.50661 4.42771 7.52998 3.73728 8.65648 3.26088C9.81898 2.76534 11.0618 2.51623 12.3422 2.51623C13.6226 2.51623 14.8627 2.76534 16.0306 3.26088C17.1571 3.73728 18.1805 4.42771 19.044 5.29391C19.3172 5.5698 19.5743 5.85641 19.8101 6.15909L21.4118 4.90552C19.3038 2.21088 16.0226 0.477839 12.3368 0.480518C5.91898 0.483196 0.765411 5.6957 0.829697 12.1162C0.893982 18.4243 6.02345 23.5162 12.3422 23.5162C17.3109 23.5162 21.5431 20.3662 23.1556 15.9546C23.1958 15.8421 23.1368 15.7162 23.0243 15.6761Z" fill="#8C8C8C"/>
+</svg>
diff --git a/public/svgs/home.svg b/public/svgs/home.svg
new file mode 100644
index 0000000..627b637
--- /dev/null
+++ b/public/svgs/home.svg
@@ -0,0 +1,4 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 4C1 2.34315 2.34315 1 4 1H16C17.6569 1 19 2.34315 19 4V9.76923H17V4C17 3.44772 16.5523 3 16 3H4C3.44772 3 3 3.44772 3 4V16C3 16.5523 3.44772 17 4 17H10.2308V19H4C2.34315 19 1 17.6569 1 16V4Z" fill="#BFBFBF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17 14.8462C15.8105 14.8462 14.8462 15.8105 14.8462 17C14.8462 18.1895 15.8105 19.1538 17 19.1538C18.1895 19.1538 19.1538 18.1895 19.1538 17C19.1538 15.8105 18.1895 14.8462 17 14.8462ZM13 17C13 14.7909 14.7909 13 17 13C19.2091 13 21 14.7909 21 17C21 19.2091 19.2091 21 17 21C14.7909 21 13 19.2091 13 17Z" fill="#BFBFBF"/>
+</svg>
diff --git a/public/svgs/index.ts b/public/svgs/index.ts
index 430202e..c53a0d7 100644
--- a/public/svgs/index.ts
+++ b/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";
diff --git a/public/svgs/message.svg b/public/svgs/message.svg
new file mode 100644
index 0000000..134959b
--- /dev/null
+++ b/public/svgs/message.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.6632 6.93129C20.1374 5.67627 19.3724 4.53554 18.4109 3.57269C17.4523 2.60817 16.3135 1.84131 15.0593 1.31566C13.7745 0.774564 12.3941 0.497197 11 0.500037H10.9531C9.53512 0.507068 8.16403 0.788318 6.87262 1.34144C5.62919 1.87248 4.50114 2.6407 3.55153 3.60316C2.59933 4.56385 1.8431 5.70059 1.32496 6.95004C0.787108 8.24932 0.514575 9.64307 0.523401 11.0493C0.530432 12.6758 0.919495 14.2907 1.64606 15.7344V19.2969C1.64606 19.8922 2.12887 20.375 2.72184 20.375H6.27965C7.73014 21.107 9.33076 21.4921 10.9554 21.5H11.0047C12.4062 21.5 13.7632 21.2282 15.0429 20.6961C16.2908 20.1768 17.4253 19.4188 18.3828 18.4649C19.3484 17.5063 20.1078 16.386 20.6398 15.1368C21.1906 13.843 21.4718 12.4672 21.4789 11.0469C21.4836 9.61957 21.207 8.23441 20.6632 6.93129ZM6.32184 12.125C5.70309 12.125 5.19918 11.6211 5.19918 11C5.19918 10.3789 5.70309 9.87504 6.32184 9.87504C6.94059 9.87504 7.44449 10.3789 7.44449 11C7.44449 11.6211 6.94293 12.125 6.32184 12.125ZM11 12.125C10.3812 12.125 9.87731 11.6211 9.87731 11C9.87731 10.3789 10.3812 9.87504 11 9.87504C11.6187 9.87504 12.1226 10.3789 12.1226 11C12.1226 11.6211 11.6187 12.125 11 12.125ZM15.6781 12.125C15.0593 12.125 14.5554 11.6211 14.5554 11C14.5554 10.3789 15.0593 9.87504 15.6781 9.87504C16.2968 9.87504 16.8007 10.3789 16.8007 11C16.8007 11.6211 16.2968 12.125 15.6781 12.125Z" fill="#8C8C8C"/>
+</svg>
diff --git a/public/svgs/setting.svg b/public/svgs/setting.svg
new file mode 100644
index 0000000..1a0f4cf
--- /dev/null
+++ b/public/svgs/setting.svg
@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2682_29)">
+<path d="M19.2141 12.5412L17.752 11.2912C17.8212 10.8671 17.8569 10.434 17.8569 10.001C17.8569 9.56796 17.8212 9.13492 17.752 8.71082L19.2141 7.46082C19.3243 7.36641 19.4033 7.24067 19.4403 7.10032C19.4774 6.95997 19.4709 6.81166 19.4216 6.6751L19.4016 6.61706C18.9991 5.49212 18.3963 4.44929 17.6225 3.53894L17.5824 3.49207C17.4885 3.38169 17.3634 3.30235 17.2235 3.26449C17.0837 3.22664 16.9356 3.23205 16.7989 3.28001L14.9841 3.9251C14.3145 3.37599 13.5667 2.94296 12.7587 2.63939L12.4083 0.742065C12.3818 0.599302 12.3126 0.467964 12.2097 0.365498C12.1068 0.263032 11.9752 0.19429 11.8324 0.168405L11.7721 0.157244C10.6091 -0.0525774 9.38593 -0.0525774 8.22298 0.157244L8.16271 0.168405C8.01985 0.19429 7.88824 0.263032 7.78538 0.365498C7.68251 0.467964 7.61326 0.599302 7.58682 0.742065L7.23414 2.64832C6.43256 2.95195 5.68608 3.38476 5.02432 3.92957L3.1962 3.28001C3.05951 3.23167 2.91135 3.22606 2.77141 3.26394C2.63146 3.30182 2.50636 3.38138 2.41271 3.49207L2.37254 3.53894C1.59965 4.44993 0.997036 5.49259 0.593518 6.61706L0.573429 6.6751C0.472982 6.95412 0.555572 7.26662 0.781018 7.46082L2.26093 8.72421C2.19173 9.14385 2.15825 9.57242 2.15825 9.99876C2.15825 10.4273 2.19173 10.8559 2.26093 11.2733L0.781018 12.5367C0.670741 12.6311 0.591814 12.7569 0.554732 12.8972C0.517651 13.0376 0.524172 13.1859 0.573429 13.3224L0.593518 13.3805C0.997536 14.5055 1.59575 15.5434 2.37254 16.4586L2.41271 16.5055C2.50659 16.6158 2.6317 16.6952 2.77156 16.733C2.91142 16.7709 3.05947 16.7655 3.1962 16.7175L5.02432 16.068C5.6895 16.6148 6.4328 17.0479 7.23414 17.3492L7.58682 19.2555C7.61326 19.3982 7.68251 19.5296 7.78538 19.632C7.88824 19.7345 8.01985 19.8032 8.16271 19.8291L8.22298 19.8403C9.39662 20.0512 10.5985 20.0512 11.7721 19.8403L11.8324 19.8291C11.9752 19.8032 12.1068 19.7345 12.2097 19.632C12.3126 19.5296 12.3818 19.3982 12.4083 19.2555L12.7587 17.3581C13.5664 17.0554 14.3184 16.6209 14.9841 16.0724L16.7989 16.7175C16.9356 16.7659 17.0837 16.7715 17.2237 16.7336C17.3636 16.6957 17.4887 16.6161 17.5824 16.5055L17.6225 16.4586C18.3993 15.5412 18.9975 14.5055 19.4016 13.3805L19.4216 13.3224C19.5221 13.0479 19.4395 12.7354 19.2141 12.5412ZM16.1672 8.97421C16.223 9.31126 16.252 9.65724 16.252 10.0032C16.252 10.3492 16.223 10.6952 16.1672 11.0322L16.0199 11.9273L17.6873 13.3537C17.4345 13.936 17.1154 14.4873 16.7364 14.9965L14.6649 14.2622L13.9641 14.838C13.4306 15.2755 12.8368 15.6193 12.194 15.8604L11.3435 16.1796L10.944 18.3447C10.3135 18.4162 9.67707 18.4162 9.04664 18.3447L8.64709 16.1751L7.80334 15.8514C7.16718 15.6104 6.57566 15.2666 6.04664 14.8314L5.34575 14.2532L3.26093 14.9943C2.88146 14.4831 2.5645 13.9318 2.31004 13.3514L3.9953 11.9117L3.85021 11.0189C3.79664 10.6863 3.76763 10.3425 3.76763 10.0032C3.76763 9.66171 3.79441 9.32019 3.85021 8.9876L3.9953 8.09474L2.31004 6.65501C2.56227 6.07242 2.88146 5.52332 3.26093 5.01215L5.34575 5.75323L6.04664 5.1751C6.57566 4.73983 7.16718 4.39608 7.80334 4.15501L8.64932 3.83582L9.04887 1.66617C9.67611 1.59474 10.3167 1.59474 10.9462 1.66617L11.3457 3.83135L12.1962 4.15055C12.8368 4.39162 13.4328 4.73537 13.9663 5.17287L14.6672 5.74876L16.7386 5.01439C17.1181 5.52555 17.435 6.07689 17.6895 6.65724L16.0221 8.08358L16.1672 8.97421ZM9.99977 5.85144C7.83013 5.85144 6.0712 7.61037 6.0712 9.78001C6.0712 11.9497 7.83013 13.7086 9.99977 13.7086C12.1694 13.7086 13.9283 11.9497 13.9283 9.78001C13.9283 7.61037 12.1694 5.85144 9.99977 5.85144ZM11.7676 11.5479C11.5358 11.7804 11.2602 11.9648 10.9568 12.0905C10.6534 12.2161 10.3282 12.2805 9.99977 12.28C9.33236 12.28 8.70512 12.0189 8.23191 11.5479C7.99937 11.316 7.81498 11.0404 7.68933 10.737C7.56368 10.4336 7.49926 10.1084 7.49977 9.78001C7.49977 9.1126 7.76093 8.48537 8.23191 8.01215C8.70512 7.53894 9.33236 7.28001 9.99977 7.28001C10.6672 7.28001 11.2944 7.53894 11.7676 8.01215C12.0002 8.24403 12.1846 8.51959 12.3102 8.82298C12.4359 9.12638 12.5003 9.45163 12.4998 9.78001C12.4998 10.4474 12.2386 11.0747 11.7676 11.5479Z" fill="#BFBFBF"/>
+</g>
+<defs>
+<clipPath id="clip0_2682_29">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/svgs/star.svg b/public/svgs/star.svg
new file mode 100644
index 0000000..38aab5f
--- /dev/null
+++ b/public/svgs/star.svg
@@ -0,0 +1,11 @@
+<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_62_254)">
+<path d="M21.0184 7.96268C21.5862 5.96755 24.4138 5.96756 24.9816 7.96268L26.8462 14.5142C27.1509 15.5847 28.2507 16.2197 29.3301 15.9484L35.9278 14.2901C37.9373 13.785 39.3514 16.2284 37.9125 17.7192L33.1672 22.635C32.3966 23.4334 32.3966 24.6986 33.1672 25.4969L37.9125 30.4128C39.3514 31.9035 37.9373 34.3469 35.9278 33.8419L29.3301 32.1836C28.2507 31.9122 27.1509 32.5473 26.8462 33.6177L24.9816 40.1692C24.4138 42.1644 21.5862 42.1643 21.0184 40.1692L19.1538 33.6177C18.8491 32.5473 17.7493 31.9122 16.6699 32.1836L10.0722 33.8419C8.06274 34.3469 6.64859 31.9035 8.08755 30.4127L12.8328 25.4969C13.6034 24.6986 13.6034 23.4334 12.8328 22.635L8.08754 17.7192C6.64858 16.2284 8.06274 13.785 10.0722 14.2901L16.6699 15.9484C17.7493 16.2197 18.8491 15.5846 19.1538 14.5142L21.0184 7.96268Z" fill="#00EC97"/>
+<ellipse cx="33.7549" cy="7.41567" rx="2.26761" ry="2.26772" fill="#00EC97"/>
+</g>
+<defs>
+<clipPath id="clip0_62_254">
+<rect width="46" height="46" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/svgs/wallet.svg b/public/svgs/wallet.svg
new file mode 100644
index 0000000..77d8bbb
--- /dev/null
+++ b/public/svgs/wallet.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.625 2.625H3.375C2.96016 2.625 2.625 2.96016 2.625 3.375V20.625C2.625 21.0398 2.96016 21.375 3.375 21.375H20.625C21.0398 21.375 21.375 21.0398 21.375 20.625V3.375C21.375 2.96016 21.0398 2.625 20.625 2.625ZM19.875 13.5H12.375V10.5H19.875V13.5ZM13.5938 12C13.5938 12.2486 13.6925 12.4871 13.8683 12.6629C14.0442 12.8387 14.2826 12.9375 14.5313 12.9375C14.7799 12.9375 15.0183 12.8387 15.1942 12.6629C15.37 12.4871 15.4688 12.2486 15.4688 12C15.4688 11.7514 15.37 11.5129 15.1942 11.3371C15.0183 11.1613 14.7799 11.0625 14.5313 11.0625C14.2826 11.0625 14.0442 11.1613 13.8683 11.3371C13.6925 11.5129 13.5938 11.7514 13.5938 12Z" fill="white"/>
+</svg>
diff --git a/src/app/philip/testPage1/container/PhilipContainer.tsx b/src/app/philip/testPage1/container/PhilipContainer.tsx
new file mode 100644
index 0000000..1274da3
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/app/philip/testPage1/page.tsx b/src/app/philip/testPage1/page.tsx
new file mode 100644
index 0000000..d3c493c
--- /dev/null
+++ b/src/app/philip/testPage1/page.tsx
@@ -0,0 +1,8 @@
+"use client";
+import { PhilipContainer } from "./container/PhilipContainer";
+
+const TestPage1 = () => {
+  return <PhilipContainer />;
+};
+
+export default TestPage1;
diff --git a/src/app/sample/pageWithDrawer/container/PageWithDrawerContainer.tsx b/src/app/sample/pageWithDrawer/container/PageWithDrawerContainer.tsx
index 6fea1e3..f94d17c 100644
--- a/src/app/sample/pageWithDrawer/container/PageWithDrawerContainer.tsx
+++ b/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<
diff --git a/src/components/Atoms/EmptyContentAtom/PhilipTransactionAtom.tsx b/src/components/Atoms/EmptyContentAtom/PhilipTransactionAtom.tsx
new file mode 100644
index 0000000..8548cb4
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/components/Atoms/FooterAtom/PhilipFooterAtom.tsx b/src/components/Atoms/FooterAtom/PhilipFooterAtom.tsx
new file mode 100644
index 0000000..f5cadd5
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/components/Atoms/HeaderAtom/PhilipHeaderAtom.tsx b/src/components/Atoms/HeaderAtom/PhilipHeaderAtom.tsx
new file mode 100644
index 0000000..9e07a14
--- /dev/null
+++ b/src/components/Atoms/HeaderAtom/PhilipHeaderAtom.tsx
@@ -0,0 +1,38 @@
+import { SettingOutlined } from "@ant-design/icons";
+import SVGAtom from "../SVGAtom/SVGAtom";
+
+type Props = {
+  title: string;
+  onClickLeftIcon?: () => void;
+  onClickRightIcon?: () => void;
+};
+
+export const PhilipHeaderAtom = (props: Props) => {
+  return (
+    <div className='relative flex h-full w-full items-center justify-between bg-[#1F1F1F] px-[20px]'>
+      {/* Sample using custom svg */}
+      {props.onClickLeftIcon && (
+        <div
+          className='flex w-fit cursor-pointer items-center justify-center'
+          onClick={props.onClickLeftIcon}
+        >
+          <SVGAtom iconName='home' width={20} height={20} />
+        </div>
+      )}
+
+      <div className='text-[16px] font-medium leading-[22px] text-white'>
+        {props.title}
+      </div>
+
+      {/* Sample using Antd icon */}
+      {props.onClickRightIcon && (
+        <div
+          className='flex w-fit cursor-pointer items-center justify-center'
+          onClick={props.onClickRightIcon}
+        >
+          <SVGAtom iconName='setting' width={20} height={20} />
+        </div>
+      )}
+    </div>
+  );
+};

From e0acb7701f5d9dca0a8769634a677b6ca85d6e0d Mon Sep 17 00:00:00 2001
From: Nwokedi Philip <philippos764@gmail.com>
Date: Mon, 7 Oct 2024 19:47:02 +0100
Subject: [PATCH 2/2] chore: testPage2 completed

---
 public/svgs/arrowDown.svg                     |   3 +
 public/svgs/camera.svg                        |   3 +
 public/svgs/index.ts                          |   2 +
 .../testPage2/container/FormPageContainer.tsx | 130 ++++++++++++++++++
 src/app/philip/testPage2/page.tsx             |   8 ++
 .../Atoms/FormAtom/PhilipFormItemAtom.tsx     |  23 ++++
 .../Atoms/FormAtom/PhilipImageUploadAtom.tsx  |  60 ++++++++
 7 files changed, 229 insertions(+)
 create mode 100644 public/svgs/arrowDown.svg
 create mode 100644 public/svgs/camera.svg
 create mode 100644 src/app/philip/testPage2/container/FormPageContainer.tsx
 create mode 100644 src/app/philip/testPage2/page.tsx
 create mode 100644 src/components/Atoms/FormAtom/PhilipFormItemAtom.tsx
 create mode 100644 src/components/Atoms/FormAtom/PhilipImageUploadAtom.tsx

diff --git a/public/svgs/arrowDown.svg b/public/svgs/arrowDown.svg
new file mode 100644
index 0000000..9e4a161
--- /dev/null
+++ b/public/svgs/arrowDown.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.27954 0.824673C1.85039 0.395526 1.24158 0.308553 0.91972 0.630413C0.597859 0.952274 0.684833 1.56109 1.11398 1.99023L4.22214 5.0984C4.48949 5.36574 4.82655 5.50029 5.12054 5.48593C5.41471 5.50057 5.75213 5.36601 6.01971 5.09843L9.12787 1.99027C9.55702 1.56112 9.64399 0.952312 9.32213 0.630451C9.00027 0.30859 8.39146 0.395564 7.96231 0.824711L5.12095 3.66608L2.27954 0.824673Z" fill="black" fill-opacity="0.25"/>
+</svg>
diff --git a/public/svgs/camera.svg b/public/svgs/camera.svg
new file mode 100644
index 0000000..5a96e96
--- /dev/null
+++ b/public/svgs/camera.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="17" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.1703 3.19579H14.2514L13.556 1.24696C13.5079 1.1136 13.4199 0.998334 13.3039 0.916895C13.1878 0.835455 13.0495 0.791818 12.9078 0.791943H6.32295C6.0332 0.791943 5.7735 0.974378 5.67692 1.24696L4.97937 3.19579H2.06042C1.11176 3.19579 0.343384 3.96416 0.343384 4.91282V14.6999C0.343384 15.6486 1.11176 16.4169 2.06042 16.4169H17.1703C18.119 16.4169 18.8873 15.6486 18.8873 14.6999V4.91282C18.8873 3.96416 18.119 3.19579 17.1703 3.19579ZM9.61536 12.9829C7.71804 12.9829 6.1813 11.4461 6.1813 9.54881C6.1813 7.65149 7.71804 6.11475 9.61536 6.11475C11.5127 6.11475 13.0494 7.65149 13.0494 9.54881C13.0494 11.4461 11.5127 12.9829 9.61536 12.9829ZM7.55492 9.54881C7.55492 10.0953 7.772 10.6194 8.15841 11.0058C8.54482 11.3922 9.0689 11.6093 9.61536 11.6093C10.1618 11.6093 10.6859 11.3922 11.0723 11.0058C11.4587 10.6194 11.6758 10.0953 11.6758 9.54881C11.6758 9.00235 11.4587 8.47827 11.0723 8.09186C10.6859 7.70545 10.1618 7.48837 9.61536 7.48837C9.0689 7.48837 8.54482 7.70545 8.15841 8.09186C7.772 8.47827 7.55492 9.00235 7.55492 9.54881Z" fill="black" fill-opacity="0.45"/>
+</svg>
diff --git a/public/svgs/index.ts b/public/svgs/index.ts
index c53a0d7..66f8c4e 100644
--- a/public/svgs/index.ts
+++ b/public/svgs/index.ts
@@ -9,3 +9,5 @@ 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";
+export { default as arrowDown } from "./arrowDown.svg";
+export { default as camera } from "./camera.svg";
diff --git a/src/app/philip/testPage2/container/FormPageContainer.tsx b/src/app/philip/testPage2/container/FormPageContainer.tsx
new file mode 100644
index 0000000..4f7b40e
--- /dev/null
+++ b/src/app/philip/testPage2/container/FormPageContainer.tsx
@@ -0,0 +1,130 @@
+"use client";
+import {
+  Alert,
+  Button,
+  DatePicker,
+  Form,
+  Input,
+  Layout,
+  Select,
+  message,
+} from "antd";
+import TextArea from "antd/es/input/TextArea";
+import { Content, Header } from "antd/es/layout/layout";
+import { PhilipFormItemAtom } from "~/components/Atoms/FormAtom/PhilipFormItemAtom";
+import { PhilipImageUploadAtom } from "~/components/Atoms/FormAtom/PhilipImageUploadAtom";
+import SVGAtom from "~/components/Atoms/SVGAtom/SVGAtom";
+
+export const FormPageContainer = () => {
+  const [form] = Form.useForm();
+
+  const onFinish = (values: any) => {
+    void message.info(JSON.stringify(values));
+  };
+
+  return (
+    <Layout style={{ height: "100%" }}>
+      <Header style={{ padding: 0, height: 50 }}>
+        <div className='flex h-full w-full items-center justify-center bg-[white] px-[16.17px]'>
+          <p className='text-center text-[18.68px] font-bold leading-[26.67px] text-black/85'>
+            Vote
+          </p>
+        </div>
+      </Header>
+      <Content
+        style={{
+          overflow: "scroll",
+          padding: 0,
+          gap: "25.66px",
+          display: "flex",
+          flexDirection: "column",
+          backgroundColor: "white",
+          rowGap: "19px",
+        }}
+      >
+        <Alert
+          style={{
+            paddingLeft: "21.98px",
+            paddingRight: "21.98px",
+            paddingTop: "13.19px",
+            paddingBottom: "13.19px",
+            border: 0,
+            borderRadius: 0,
+          }}
+          type='info'
+          description={
+            <p className='text-[17.58px] font-bold leading-[28.57px] text-black/85'>
+              <span className='text-[#2F54EB]'>10 FAO</span> will be deducted
+              when voting is generated (Amount : 9 FAO)
+            </p>
+          }
+        />
+        <div className='flex flex-col px-[25px] py-[25.66px]'>
+          <form
+            onSubmit={() => alert("You have succesffully submited the form.")}
+            className='space-y-[26.67px]'
+          ></form>
+          <Form
+            form={form}
+            layout='vertical'
+            style={{ maxWidth: 600 }}
+            onFinish={onFinish}
+          >
+            <PhilipFormItemAtom label='Category'>
+              <Select
+                style={{
+                  height: "55.37px",
+                }}
+                suffixIcon={
+                  <SVGAtom iconName='arrowDown' width={8.79} height={5.05} />
+                }
+                className='text-[18.68px] leading-[28.57px] placeholder:text-[18.68px] placeholder:leading-[28.57px] placeholder:text-black/25'
+                placeholder={
+                  <p className='text-[18.68px] leading-[28.57px] text-black/25'>
+                    Birthday AD
+                  </p>
+                }
+              >
+                <Select.Option value='option1'>Option 1</Select.Option>
+              </Select>
+            </PhilipFormItemAtom>
+            <PhilipFormItemAtom label='Vote Title' name='title'>
+              <Input
+                style={{
+                  height: "55.37px",
+                }}
+                placeholder='Title'
+                className='!p-[13.19px] text-[18.68px] leading-[28.57px] placeholder:text-[18.68px] placeholder:leading-[28.57px] placeholder:text-black/25'
+              />
+            </PhilipFormItemAtom>
+            <PhilipFormItemAtom label='Image'>
+              <PhilipImageUploadAtom />
+            </PhilipFormItemAtom>
+            <PhilipFormItemAtom label='Description' name='description'>
+              <TextArea
+                rows={7}
+                placeholder='Please write down a description of the event'
+                className='!p-[13.19px] text-[16.48px] leading-[21.98px] placeholder:text-[16.48px] placeholder:leading-[21.98px] placeholder:text-black/25'
+              />
+            </PhilipFormItemAtom>
+            <PhilipFormItemAtom label='Start' name='start'>
+              <DatePicker
+                placeholder='2024-09-06'
+                className='w-full !p-[13.19px] text-[18.68px] leading-[28.57px] placeholder:text-[18.68px] placeholder:leading-[28.57px] placeholder:text-black/25'
+              />
+            </PhilipFormItemAtom>
+            <div className='flex h-[53.37px] w-full items-center justify-center'>
+              <Button
+                type='primary'
+                htmlType='submit'
+                className='!h-full w-full !bg-[#2F54EB] !text-[19.78px] !leading-[26.37px]'
+              >
+                Create Vote
+              </Button>
+            </div>
+          </Form>
+        </div>
+      </Content>
+    </Layout>
+  );
+};
diff --git a/src/app/philip/testPage2/page.tsx b/src/app/philip/testPage2/page.tsx
new file mode 100644
index 0000000..e00b1f7
--- /dev/null
+++ b/src/app/philip/testPage2/page.tsx
@@ -0,0 +1,8 @@
+"use client";
+import { FormPageContainer } from "./container/FormPageContainer";
+
+const TestPage1 = () => {
+  return <FormPageContainer />;
+};
+
+export default TestPage1;
diff --git a/src/components/Atoms/FormAtom/PhilipFormItemAtom.tsx b/src/components/Atoms/FormAtom/PhilipFormItemAtom.tsx
new file mode 100644
index 0000000..f1a950b
--- /dev/null
+++ b/src/components/Atoms/FormAtom/PhilipFormItemAtom.tsx
@@ -0,0 +1,23 @@
+import { Form } from "antd";
+import { ReactNode } from "react";
+
+type Props = {
+  label: string;
+  children: ReactNode;
+  name?: string;
+};
+
+export const PhilipFormItemAtom = (props: Props) => {
+  return (
+    <Form.Item
+      label={
+        <p className='text-[16.48px] font-medium leading-[19.95px] text-black/85'>
+          {props.label}
+        </p>
+      }
+      name={props.name}
+    >
+      {props.children}
+    </Form.Item>
+  );
+};
diff --git a/src/components/Atoms/FormAtom/PhilipImageUploadAtom.tsx b/src/components/Atoms/FormAtom/PhilipImageUploadAtom.tsx
new file mode 100644
index 0000000..73425d5
--- /dev/null
+++ b/src/components/Atoms/FormAtom/PhilipImageUploadAtom.tsx
@@ -0,0 +1,60 @@
+import React, { ChangeEvent, useState } from "react";
+import SVGAtom from "../SVGAtom/SVGAtom";
+import Image from "next/image";
+
+type Props = {
+  className?: string;
+};
+
+const getBase64 = (file: File): Promise<File> =>
+  new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => {
+      resolve(file);
+    };
+    reader.onerror = (error) => reject(error);
+  });
+
+export const PhilipImageUploadAtom = (props: Props) => {
+  const [image, setImage] = useState<File | null>(null);
+
+  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files ? e.target.files[0] : null;
+    if (file) {
+      getBase64(file)
+        .then((f) => setImage(f))
+        .catch(() => {
+          setImage(null);
+        });
+    }
+  };
+
+  return (
+    <div className='relative aspect-[360/184] w-full rounded-[8.79px] bg-[#F5F5F5]'>
+      {image ? (
+        <>
+          <Image
+            fill
+            className='h-full w-full object-contain'
+            alt=''
+            src={URL.createObjectURL(image)}
+          />
+        </>
+      ) : (
+        <SVGAtom
+          iconName='camera'
+          width={21.98}
+          height={21.98}
+          className='absolute left-[50%] top-[50%] -translate-x-[50%] -translate-y-[50%]'
+        />
+      )}
+      <input
+        type='file'
+        accept='image/png, image/jpeg'
+        className='h-full w-full opacity-0'
+        onChange={handleFileChange}
+      />
+    </div>
+  );
+};