diff --git a/public/assets/block.png b/public/assets/block.png new file mode 100644 index 0000000..8dfedb7 Binary files /dev/null and b/public/assets/block.png differ diff --git a/public/assets/ethereum.png b/public/assets/ethereum.png new file mode 100644 index 0000000..cb5e2b2 Binary files /dev/null and b/public/assets/ethereum.png differ diff --git a/public/assets/history.png b/public/assets/history.png new file mode 100644 index 0000000..73e7441 Binary files /dev/null and b/public/assets/history.png differ diff --git a/public/assets/message.png b/public/assets/message.png new file mode 100644 index 0000000..2ee043c Binary files /dev/null and b/public/assets/message.png differ diff --git a/public/assets/nvir.webp b/public/assets/nvir.webp new file mode 100644 index 0000000..5515206 Binary files /dev/null and b/public/assets/nvir.webp differ diff --git a/public/assets/star.png b/public/assets/star.png new file mode 100644 index 0000000..03a7c52 Binary files /dev/null and b/public/assets/star.png differ diff --git a/src/app/ibuchukwu/testpage1/container/Testpage1Container.tsx b/src/app/ibuchukwu/testpage1/container/Testpage1Container.tsx new file mode 100644 index 0000000..bf970b3 --- /dev/null +++ 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["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 ; +}; diff --git a/src/app/ibuchukwu/testpage1/page.tsx b/src/app/ibuchukwu/testpage1/page.tsx new file mode 100644 index 0000000..fc69040 --- /dev/null +++ b/src/app/ibuchukwu/testpage1/page.tsx @@ -0,0 +1,8 @@ +"use client"; +import { Testpage1Container } from "./container/Testpage1Container"; + +const TestPage1 = () => { + return ; +}; + +export default TestPage1; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 3a8a114..fc316d0 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -15,12 +15,13 @@ export default function RootLayout({ children: React.ReactNode; }) { return ( - - -
+ + + {/* line 21: modified layout to properly accomodate test screen */} +
{children} -
-
+
+
diff --git a/src/components/Atoms/BottomNavAtom/BottomNavAtom.tsx b/src/components/Atoms/BottomNavAtom/BottomNavAtom.tsx new file mode 100644 index 0000000..35d6bf7 --- /dev/null +++ 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 ( +
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ ); +}; diff --git a/src/components/Atoms/HeaderAtom/HeaderAtom.tsx b/src/components/Atoms/HeaderAtom/HeaderAtom.tsx index 414c1a8..2befe44 100644 --- 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 ( -
+
{/* Sample using custom svg */} {props.onClickLeftIcon && (
- +
)}
{props.title}
{/* Sample using Antd icon */} + {/* line 30: OnCLickRightIcon already passed as prop in container*/} {props.onClickRightIcon && (
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} > - +
)}
diff --git a/src/components/Atoms/TestPageHeaderAtom/TestPageHeaderAtom.tsx b/src/components/Atoms/TestPageHeaderAtom/TestPageHeaderAtom.tsx new file mode 100644 index 0000000..9652a0a --- /dev/null +++ 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 ( +
+ +

{props.title}

+ +
+ ); +}; diff --git a/src/components/Components/TestPageOneContentComponent/TestPageOneMessageComponent.tsx b/src/components/Components/TestPageOneContentComponent/TestPageOneMessageComponent.tsx new file mode 100644 index 0000000..c3b8f46 --- /dev/null +++ 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 ( +
+ {props.messages.map((message) => ( +
+
+ message profile +
+
+
+

+ {message.messageTitle} +

+

+ {message.receivedTime} +

+
+
+

+ {message.messageBody} +

+ {!message.isRead && ( +
+ N +
+ )} +
+
+
+ ))} +
+ ); +}; diff --git a/src/components/Components/TestPageOneLoadingModal/TestPageOneLoadingModal.tsx b/src/components/Components/TestPageOneLoadingModal/TestPageOneLoadingModal.tsx new file mode 100644 index 0000000..5a264c7 --- /dev/null +++ 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; + title: string; + description: string; + iconUrl: string; +}; + +export const TestPageOneLoadingModal = (props: Props) => { + return ( + +
+

+ {props.title} +

+ block icon +

+ {props.description} +

+
+ + ); +}; diff --git a/src/components/Modules/TestPageOne/TestPageOneContentModule.tsx b/src/components/Modules/TestPageOne/TestPageOneContentModule.tsx new file mode 100644 index 0000000..9eb57c0 --- /dev/null +++ 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; +}; + +export const TestPageOneContentModule = (props: Props) => { + return ( +
+
+

+ Messages +

+
+
+ star icon +
+

+ Proxima +

+
+
+ + +
+ ); +}; diff --git a/src/components/Modules/TestPageOne/TestPageOneFooterModule.tsx b/src/components/Modules/TestPageOne/TestPageOneFooterModule.tsx new file mode 100644 index 0000000..9b16d9f --- /dev/null +++ b/src/components/Modules/TestPageOne/TestPageOneFooterModule.tsx @@ -0,0 +1,9 @@ +import { BottomNavAtom } from "~/components/Atoms/BottomNavAtom/BottomNavAtom"; + +type Props = { + footerProps: React.ComponentProps; +}; + +export const TestPageOneFooterModule = (props: Props) => { + return ; +}; diff --git a/src/components/Modules/TestPageOne/TestPageOneHeaderModule.tsx b/src/components/Modules/TestPageOne/TestPageOneHeaderModule.tsx new file mode 100644 index 0000000..3c6fa22 --- /dev/null +++ b/src/components/Modules/TestPageOne/TestPageOneHeaderModule.tsx @@ -0,0 +1,9 @@ +import { TestPageHeaderAtom } from "~/components/Atoms/TestPageHeaderAtom/TestPageHeaderAtom"; + +type Props = { + headerProps: React.ComponentProps; +}; + +export const TestPageOneHeaderModule = (props: Props) => { + return ; +}; diff --git a/src/components/Templates/TestPageOne/TestPageOneTemplate.tsx b/src/components/Templates/TestPageOne/TestPageOneTemplate.tsx new file mode 100644 index 0000000..b99bc3a --- /dev/null +++ b/src/components/Templates/TestPageOne/TestPageOneTemplate.tsx @@ -0,0 +1,34 @@ +import { Layout } from "antd"; +import { Content, Footer, Header } from "antd/es/layout/layout"; +import { TestPageOneContentModule } from "~/components/Modules/TestPageOne/TestPageOneContentModule"; +import { TestPageOneFooterModule } from "~/components/Modules/TestPageOne/TestPageOneFooterModule"; +import { TestPageOneHeaderModule } from "~/components/Modules/TestPageOne/TestPageOneHeaderModule"; + +type Props = { + TestPageOneHeaderProps: React.ComponentProps; + TestPageOneContentProps: React.ComponentProps< + typeof TestPageOneContentModule + >; + TestPageOneFooterProps: React.ComponentProps; +}; + +export const TestPageOneTemplate = (props: Props) => { + return ( + +
+ +
+ + + + + + ); +}; diff --git a/src/styles/globals.css b/src/styles/globals.css index 778c42d..7246475 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -1,3 +1,5 @@ +@import url("https://fonts.googleapis.com/css2?family=Inter:opsz@14..32&display=swap"); +@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"); @tailwind base; @tailwind components; @tailwind utilities; diff --git a/tailwind.config.ts b/tailwind.config.ts index 9ee6e27..5803037 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -5,8 +5,13 @@ export default { content: ["./src/**/*.tsx"], theme: { extend: { + boxShadow: { + custom: "4px 4px 24px 0px #00000073", + }, fontFamily: { sans: ["var(--font-geist-sans)", ...fontFamily.sans], + inter: ["Inter", ...fontFamily.sans], + pretendard: ["Pretendard", ...fontFamily.sans], }, spacing: { page: "500px",