diff --git a/public/blocks.png b/public/blocks.png new file mode 100644 index 0000000..ada0d8c Binary files /dev/null and b/public/blocks.png differ diff --git a/public/eth.png b/public/eth.png new file mode 100644 index 0000000..a3c324c Binary files /dev/null and b/public/eth.png differ diff --git a/public/nvir.png b/public/nvir.png new file mode 100644 index 0000000..54a1a91 Binary files /dev/null and b/public/nvir.png differ 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 @@ + + + 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 @@ + + + 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 @@ + + + + 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 @@ + + + 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 @@ + + + + + + + + + + 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 @@ + + + + + + + + + + + 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 @@ + + + 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 ( + +
+ alert("Left icon clicked.")} + onClickRightIcon={() => alert("Settings icon clicked.")} + /> +
+ +
+

+ Messages +

+
+
+
+
+ Proxima +
+
+

+ Proxima +

+
+
+
+ + setModalOpen(true)} + /> + setModalOpen(true)} + /> + + +

+ Transaction +
processing +

+
+ Blockchain +
+

+ Uploading your transaction to the node. please wait for a moment... +
This may take up to 2 minutes. +

+ + + + + ); +}; 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 ; +}; + +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 ( +
+
+ {props.token} +
+
+
+

+ {props.token} +

+

{props.time}

+
+
+

+ {props.message} +

+ {props.initial && props.initial.length > 0 && ( +
+

+ {props.initial[0]} +

+
+ )} +
+
+
+ ); +}; 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 ( +
+
+
+ +
+
props.drawerProps.setIsDrawerOpen(false)} + className={`flex flex-1 items-center justify-center ${!props.drawerProps.isDrawerOpen && "border-t-2 border-t-[#00EC97]"}`} + > + +
+
props.drawerProps.setIsDrawerOpen(true)} + className={`flex flex-1 items-center justify-center ${props.drawerProps.isDrawerOpen && "border-t-2 border-t-[#00EC97]"}`} + > + +
+
+ +
+
+
+ ); +}; 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 ( +
+ {/* Sample using custom svg */} + {props.onClickLeftIcon && ( +
+ +
+ )} + +
+ {props.title} +
+ + {/* Sample using Antd icon */} + {props.onClickRightIcon && ( +
+ +
+ )} +
+ ); +};