diff --git a/src/app/emeka/testPage1/container/TestPageContainer.tsx b/src/app/emeka/testPage1/container/TestPageContainer.tsx new file mode 100644 index 0000000..2f2c390 --- /dev/null +++ b/src/app/emeka/testPage1/container/TestPageContainer.tsx @@ -0,0 +1,47 @@ +import { useRouter } from "next/navigation"; +import { useState } from "react"; +import { message } from "antd"; +import { PageWithModalTemplate } from "~/components/Templates/PageWithModal/PageWithModalTemplate"; +import ModalStore from "~/store/ModalStore"; + +export const PageWithModalContainer = () => { + const router = useRouter(); + const [isCustomModalOpen, setIsCustomModalOpen] = useState(true); + + 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, + }, + title: "Transaction Processing", + description: + "Uploading your transaction to the node. please wait for a moment...This may take up to 2 minutes", + }, + }, + pageInfoProps: { + title: "Messages", + sampleLinks: [], + }, + }; + + return ; +}; diff --git a/src/app/emeka/testPage1/page.tsx b/src/app/emeka/testPage1/page.tsx new file mode 100644 index 0000000..781fc90 --- /dev/null +++ b/src/app/emeka/testPage1/page.tsx @@ -0,0 +1,19 @@ +import React from "react"; +import Image from "next/image"; + +interface AvatarProps { + size?: number; + user: string; +} + +const UserAvatarAtom: React.FC = ({ user, size = 20 }) => { + return ( +
+

{user}

+
+ ); +}; + +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 = ({ size }) => { + const textSize = + size === "lg" ? "text-lg font-bold" : "text-sm text-gray-400"; + return ( +
+ {CardList.map((cardList, idx) => ( +
+
+ +
+

{cardList.exchange}

+

{cardList.message}

+
+
+
+

{`${cardList.timeStamp}PM`}

+ +
+
+ ))} +
+ ); +}; + +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 = ({ alt, size = 40 }) => { + return ( +
+ {alt} +

Proxima

+
+ ); +}; + +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 = ({ user, size = 20 }) => { + return ( +
+

{user}

+
+ ); +}; + +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 ( +
+

Messages

+ +
+ ); +}; + +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 ( +
+ +
+ ); +}; 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 = ({ size }) => { + const textSize = + size === "lg" ? "text-lg font-bold" : "text-sm text-gray-400"; + return ( +
+ {CardList.map((cardList, idx) => ( +
+
+ +
+

{cardList.exchange}

+

{cardList.message}

+
+
+
+

{`${cardList.timeStamp}PM`}

+ +
+
+ ))} +
+ ); +}; + +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; }; export const PageWithModalTemplate = (props: Props) => { @@ -19,21 +23,39 @@ export const PageWithModalTemplate = (props: Props) => {
- + + + - + + + + + ); };