From fad2b701b9b44a7382cddc6e323f540fdcda4022 Mon Sep 17 00:00:00 2001 From: Devintel Date: Thu, 26 Sep 2024 15:24:50 +0100 Subject: [PATCH 1/4] Added Daniel testPage1 --- package-lock.json | 9 +- public/svgs/cast.svg | 4 + public/svgs/chat.svg | 3 + public/svgs/currency.svg | 3 + public/svgs/eth.svg | 9 ++ public/svgs/history.svg | 3 + public/svgs/index.ts | 13 ++- public/svgs/loader.svg | 19 ++++ public/svgs/nvir.svg | 20 ++++ public/svgs/star.svg | 11 ++ public/svgs/wallet.svg | 3 + .../testPage1/container/HomeContainer.tsx | 46 ++++++++ src/app/daniel/testPage1/page.tsx | 5 + .../DanielEmptyContentAtom.tsx | 14 +++ .../DanielPreviewContentAtom.tsx | 100 +++++++++++++++++ .../DanielPreviewDisplayAtom.tsx | 106 ++++++++++++++++++ .../EmptyContentAtom/DanielStarredAtom.tsx | 22 ++++ .../Atoms/FooterAtom/DanielFooterAtom.tsx | 53 +++++++++ .../Atoms/HeaderAtom/DanielHeaderAtom.tsx | 36 ++++++ 19 files changed, 474 insertions(+), 5 deletions(-) create mode 100644 public/svgs/cast.svg create mode 100644 public/svgs/chat.svg create mode 100644 public/svgs/currency.svg create mode 100644 public/svgs/eth.svg create mode 100644 public/svgs/history.svg create mode 100644 public/svgs/loader.svg create mode 100644 public/svgs/nvir.svg create mode 100644 public/svgs/star.svg create mode 100644 public/svgs/wallet.svg create mode 100644 src/app/daniel/testPage1/container/HomeContainer.tsx create mode 100644 src/app/daniel/testPage1/page.tsx create mode 100644 src/components/Atoms/EmptyContentAtom/DanielEmptyContentAtom.tsx create mode 100644 src/components/Atoms/EmptyContentAtom/DanielPreviewContentAtom.tsx create mode 100644 src/components/Atoms/EmptyContentAtom/DanielPreviewDisplayAtom.tsx create mode 100644 src/components/Atoms/EmptyContentAtom/DanielStarredAtom.tsx create mode 100644 src/components/Atoms/FooterAtom/DanielFooterAtom.tsx create mode 100644 src/components/Atoms/HeaderAtom/DanielHeaderAtom.tsx diff --git a/package-lock.json b/package-lock.json index a43cf46..4bf7a47 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2912,6 +2912,7 @@ "version": "20.14.1", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.1.tgz", "integrity": "sha512-T2MzSGEu+ysB/FkWfqmhV3PLyQlowdptmmgD20C6QxsS8Fmv5SjpZ1ayXaEC0S21/h5UJ9iA6W/5vSNU5l00OA==", + "dev": true, "dependencies": { "undici-types": "~5.26.4" } @@ -2920,13 +2921,13 @@ "version": "15.7.12", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==", - "devOptional": true + "dev": true }, "node_modules/@types/react": { "version": "18.3.3", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz", "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==", - "devOptional": true, + "dev": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" @@ -8646,6 +8647,7 @@ "version": "5.4.5", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz", "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==", + "dev": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -8672,7 +8674,8 @@ "node_modules/undici-types": { "version": "5.26.5", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", - "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==" + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", + "dev": true }, "node_modules/unicode-canonical-property-names-ecmascript": { "version": "2.0.0", diff --git a/public/svgs/cast.svg b/public/svgs/cast.svg new file mode 100644 index 0000000..627b637 --- /dev/null +++ b/public/svgs/cast.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/svgs/chat.svg b/public/svgs/chat.svg new file mode 100644 index 0000000..b1b3232 --- /dev/null +++ b/public/svgs/chat.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/svgs/currency.svg b/public/svgs/currency.svg new file mode 100644 index 0000000..7739135 --- /dev/null +++ b/public/svgs/currency.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/svgs/eth.svg b/public/svgs/eth.svg new file mode 100644 index 0000000..03f6f11 --- /dev/null +++ b/public/svgs/eth.svg @@ -0,0 +1,9 @@ + + + + + + + + + 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/index.ts b/public/svgs/index.ts index 430202e..0ad5850 100644 --- a/public/svgs/index.ts +++ b/public/svgs/index.ts @@ -1,5 +1,14 @@ // basic util svg -export { default as copy } from "./copy.svg"; -export { default as control } from "./control.svg"; export { default as arrowLeft } from "./arrowLeft.svg"; +export { default as cast } from "./cast.svg"; +export { default as chat } from "./chat.svg"; +export { default as control } from "./control.svg"; +export { default as copy } from "./copy.svg"; +export { default as currency } from "./currency.svg"; +export { default as eth } from "./eth.svg"; +export { default as history } from "./history.svg"; +export { default as loader } from "./loader.svg"; +export { default as nvir } from "./nvir.svg"; export { default as outLink } from "./outLink.svg"; +export { default as star } from "./star.svg"; +export { default as wallet } from "./wallet.svg"; diff --git a/public/svgs/loader.svg b/public/svgs/loader.svg new file mode 100644 index 0000000..a34cbfc --- /dev/null +++ b/public/svgs/loader.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/public/svgs/nvir.svg b/public/svgs/nvir.svg new file mode 100644 index 0000000..cbdc395 --- /dev/null +++ b/public/svgs/nvir.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + 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/daniel/testPage1/container/HomeContainer.tsx b/src/app/daniel/testPage1/container/HomeContainer.tsx new file mode 100644 index 0000000..599b974 --- /dev/null +++ b/src/app/daniel/testPage1/container/HomeContainer.tsx @@ -0,0 +1,46 @@ +"use client"; +import { Layout } from "antd"; +import { Content, Footer, Header } from "antd/es/layout/layout"; +import { DanielEmptyContentAtom } from "~/components/Atoms/EmptyContentAtom/DanielEmptyContentAtom"; +import DanielPreviewDisplayAtom from "~/components/Atoms/EmptyContentAtom/DanielPreviewDisplayAtom"; +import { DanielFooterAtom } from "~/components/Atoms/FooterAtom/DanielFooterAtom"; +import { DanielHeaderAtom } from "~/components/Atoms/HeaderAtom/DanielHeaderAtom"; + +const HomeContainer = () => { + return ( + +
+ alert("You just clicked the cast icon")} + onClickRightIcon={() => alert("You just clicked the settings icon")} + title='Proxima OS' + /> + + + + + + +
+ +
+
+ + ); +}; + +export default HomeContainer; diff --git a/src/app/daniel/testPage1/page.tsx b/src/app/daniel/testPage1/page.tsx new file mode 100644 index 0000000..5fdec28 --- /dev/null +++ b/src/app/daniel/testPage1/page.tsx @@ -0,0 +1,5 @@ +import HomeContainer from "./container/HomeContainer"; + +export default function TestPageOne() { + return ; +} diff --git a/src/components/Atoms/EmptyContentAtom/DanielEmptyContentAtom.tsx b/src/components/Atoms/EmptyContentAtom/DanielEmptyContentAtom.tsx new file mode 100644 index 0000000..a4a0a73 --- /dev/null +++ b/src/components/Atoms/EmptyContentAtom/DanielEmptyContentAtom.tsx @@ -0,0 +1,14 @@ +import { DanielStarredAtom } from "./DanielStarredAtom"; + +export const DanielEmptyContentAtom = () => { + return ( +
+
Messages
+
+
+ +
+
+
+ ); +}; diff --git a/src/components/Atoms/EmptyContentAtom/DanielPreviewContentAtom.tsx b/src/components/Atoms/EmptyContentAtom/DanielPreviewContentAtom.tsx new file mode 100644 index 0000000..e8c5964 --- /dev/null +++ b/src/components/Atoms/EmptyContentAtom/DanielPreviewContentAtom.tsx @@ -0,0 +1,100 @@ +import Image from "next/image"; +import { useCallback } from "react"; +import { ModalContainer } from "../ModalContainer/ModalContainer"; + +interface PreviewProps { + avatar: string; + name: string; + userDetails: string; + time: string; + userAvatar?: string; + onclick?: () => void; + modalOpen?: boolean; + setModalOpen?: React.Dispatch>; + children?: React.ReactNode; + className?: string; +} + +const DanielPreviewContentAtom = ({ + avatar, + name, + userDetails, + time, + userAvatar, + onclick, + modalOpen, + setModalOpen, + children, + className, +}: PreviewProps) => { + const onClose = useCallback(() => { + modalOpen && setModalOpen?.(false); + // Checks modal state and close it if open, using optional chaining to check if the callback exists + }, [modalOpen, setModalOpen]); + + return ( + <> +
+
+ avatarIcon +
+ +
+
+
+

+ {name} +

+
+
{time}
+
+ +
+
{userDetails}
+ + {/* Render userAvatar only if present */} + {userAvatar && ( +
+ {userAvatar} +
+ )} +
+
+
+ + {modalOpen && ( +
+
+ + {children} + +
+ )} + + ); +}; + +export default DanielPreviewContentAtom; diff --git a/src/components/Atoms/EmptyContentAtom/DanielPreviewDisplayAtom.tsx b/src/components/Atoms/EmptyContentAtom/DanielPreviewDisplayAtom.tsx new file mode 100644 index 0000000..b0e486d --- /dev/null +++ b/src/components/Atoms/EmptyContentAtom/DanielPreviewDisplayAtom.tsx @@ -0,0 +1,106 @@ +"use client"; +import Image from "next/image"; +import { useState } from "react"; +import DanielPreviewContentAtom from "./DanielPreviewContentAtom"; + +const DanielPreviewDisplayAtom = () => { + // Track which modal is open; null means no open modal + const [isOpen, setIsOpen] = useState(null); + + // Function to toggle modals by name + const toggleModal = (name: string) => { + setIsOpen(isOpen === name ? null : name); // Toggle modal based on the current state + }; + + // Data array for preview content; simplifies adding/removing items + const previewData = [ + { + avatar: "/svgs/eth.svg", + name: "ETH", + time: "08:43 PM", + userDetails: "User: namulabs is a fantastic company...", + userAvatar: "N", + className: + "flex w-[300px] flex-col items-center justify-center space-y-3 bg-[#2C2D30] p-5 text-white", + content: ( + <> +

+ Transaction
processing +

+ +
+ loader +
+ +

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

+ + ), + }, + { + avatar: "/svgs/nvir.svg", + name: "Nvir", + time: "08:42 AM", + userDetails: "User: namulabs is a fantastic company...", + content: ( + <> +

+ Transaction
processing +

+ +
+ loader +
+ +

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

+ + ), + }, + ]; + + return ( + <> +
+
+ {previewData.map((data, index) => ( + toggleModal(data.name)} + modalOpen={isOpen === data.name} // Conditional modal display + setModalOpen={() => setIsOpen(null)} // Close modal on demand + className='flex w-[300px] flex-col items-center justify-center space-y-3 bg-[#2C2D30] p-5 text-white' + > + {data.content} + + ))} +
+
+ + ); +}; + +export default DanielPreviewDisplayAtom; diff --git a/src/components/Atoms/EmptyContentAtom/DanielStarredAtom.tsx b/src/components/Atoms/EmptyContentAtom/DanielStarredAtom.tsx new file mode 100644 index 0000000..e972681 --- /dev/null +++ b/src/components/Atoms/EmptyContentAtom/DanielStarredAtom.tsx @@ -0,0 +1,22 @@ +import Image from "next/image"; + +export const DanielStarredAtom = ({ name }: { name: string }) => { + return ( + <> +
+
+ starIconIllustration +
+ +

+ {name ? name : "Proxima"} +

+
+ + ); +}; diff --git a/src/components/Atoms/FooterAtom/DanielFooterAtom.tsx b/src/components/Atoms/FooterAtom/DanielFooterAtom.tsx new file mode 100644 index 0000000..88bdc57 --- /dev/null +++ b/src/components/Atoms/FooterAtom/DanielFooterAtom.tsx @@ -0,0 +1,53 @@ +import Link from "next/link"; +import { usePathname } from "next/navigation"; +import SVGAtom from "../SVGAtom/SVGAtom"; + +interface FooterNavComponentProps { + icon: "currency" | "chat" | "wallet" | "history"; + path: string; +} + +const footerNavData: FooterNavComponentProps[] = [ + { + icon: "currency", + path: "/", + }, + { + icon: "chat", + path: "/", + }, + { + icon: "wallet", + path: "/daniel/testPage1", + }, + { + icon: "history", + path: "/", + }, +]; + +export const DanielFooterAtom = () => { + const pathname = usePathname(); + + return ( + <> +
+
+ {footerNavData.map((data, i) => { + const { icon, path } = data; + + return ( + +
+ +
+ + ); + })} +
+
+ + ); +}; diff --git a/src/components/Atoms/HeaderAtom/DanielHeaderAtom.tsx b/src/components/Atoms/HeaderAtom/DanielHeaderAtom.tsx new file mode 100644 index 0000000..ac2d4d5 --- /dev/null +++ b/src/components/Atoms/HeaderAtom/DanielHeaderAtom.tsx @@ -0,0 +1,36 @@ +import { SettingOutlined } from "@ant-design/icons"; +import SVGAtom from "../SVGAtom/SVGAtom"; + +type Props = { + title: string; + onClickLeftIcon?: () => void; + onClickRightIcon?: () => void; +}; + +export const DanielHeaderAtom = (props: Props) => { + return ( +
+ {/* Sample using custom svg */} + {props.onClickLeftIcon && ( +
+ +
+ )} + +
{props.title}
+ + {/* Sample using Antd icon */} + {props.onClickRightIcon && ( +
console.log("Antd icon clicked")} + > + +
+ )} +
+ ); +}; From 595fe1c537101316d3cd73292ef421a4f817728b Mon Sep 17 00:00:00 2001 From: Devintel Date: Thu, 26 Sep 2024 15:54:46 +0100 Subject: [PATCH 2/4] test page 1 completed --- .../testPage1/container/HomeContainer.tsx | 29 +++++++++---------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/src/app/daniel/testPage1/container/HomeContainer.tsx b/src/app/daniel/testPage1/container/HomeContainer.tsx index 599b974..f176492 100644 --- a/src/app/daniel/testPage1/container/HomeContainer.tsx +++ b/src/app/daniel/testPage1/container/HomeContainer.tsx @@ -8,15 +8,10 @@ import { DanielHeaderAtom } from "~/components/Atoms/HeaderAtom/DanielHeaderAtom const HomeContainer = () => { return ( - +
{ title='Proxima OS' /> - - - + +
+ +
+ +
+ +
From b190c106b225f8cb42cd7a110a8fd369e0c11d1f Mon Sep 17 00:00:00 2001 From: Devintel Date: Thu, 26 Sep 2024 20:48:38 +0100 Subject: [PATCH 3/4] branch created, testPage 1 done --- .../testPage1/container/HomeContainer.tsx | 36 +++++++------- .../testPage2/container/HomeContainerTwo.tsx | 49 +++++++++++++++++++ src/app/daniel/testPage2/page.tsx | 5 ++ .../DanielPreviewDisplayAtom.tsx | 2 +- .../Atoms/FooterAtom/DanielFooterAtom.tsx | 2 +- .../Atoms/HeaderAtom/DanielHeaderTwoAtom.tsx | 11 +++++ 6 files changed, 85 insertions(+), 20 deletions(-) create mode 100644 src/app/daniel/testPage2/container/HomeContainerTwo.tsx create mode 100644 src/app/daniel/testPage2/page.tsx create mode 100644 src/components/Atoms/HeaderAtom/DanielHeaderTwoAtom.tsx diff --git a/src/app/daniel/testPage1/container/HomeContainer.tsx b/src/app/daniel/testPage1/container/HomeContainer.tsx index f176492..ba8cc1b 100644 --- a/src/app/daniel/testPage1/container/HomeContainer.tsx +++ b/src/app/daniel/testPage1/container/HomeContainer.tsx @@ -8,7 +8,7 @@ import { DanielHeaderAtom } from "~/components/Atoms/HeaderAtom/DanielHeaderAtom const HomeContainer = () => { return ( - +
{ onClickRightIcon={() => alert("You just clicked the settings icon")} title='Proxima OS' /> +
- -
- -
- -
- -
- + +
+ +
-
- -
-
+
+ +
+ + +
+ +
); }; diff --git a/src/app/daniel/testPage2/container/HomeContainerTwo.tsx b/src/app/daniel/testPage2/container/HomeContainerTwo.tsx new file mode 100644 index 0000000..bdb24aa --- /dev/null +++ b/src/app/daniel/testPage2/container/HomeContainerTwo.tsx @@ -0,0 +1,49 @@ +"use client"; +import { Layout } from "antd"; +import { Content, Footer, Header } from "antd/es/layout/layout"; +import { type ChangeEvent, useState } from "react"; +import { DanielEmptyContentAtom } from "~/components/Atoms/EmptyContentAtom/DanielEmptyContentAtom"; +import { DanielFooterAtom } from "~/components/Atoms/FooterAtom/DanielFooterAtom"; +import { DanielHeaderTwoAtom } from "~/components/Atoms/HeaderAtom/DanielHeaderTwoAtom"; + +const HomeContainerTwo: React.FC = () => { + const [image, setImage] = useState(null); + + const handleImageChange = (e: ChangeEvent) => { + const file = e.target.files ? e.target.files[0] : null; + if (file) { + setImage(file); + } + }; + + return ( + +
+ +
+ + +
+ +
+ + +
+ +
+ + ); +}; + +export default HomeContainerTwo; diff --git a/src/app/daniel/testPage2/page.tsx b/src/app/daniel/testPage2/page.tsx new file mode 100644 index 0000000..9c14bee --- /dev/null +++ b/src/app/daniel/testPage2/page.tsx @@ -0,0 +1,5 @@ +import HomeContainerTwo from "./container/HomeContainerTwo"; + +export default function TestPageTwo() { + return ; +} diff --git a/src/components/Atoms/EmptyContentAtom/DanielPreviewDisplayAtom.tsx b/src/components/Atoms/EmptyContentAtom/DanielPreviewDisplayAtom.tsx index b0e486d..de6fa2d 100644 --- a/src/components/Atoms/EmptyContentAtom/DanielPreviewDisplayAtom.tsx +++ b/src/components/Atoms/EmptyContentAtom/DanielPreviewDisplayAtom.tsx @@ -79,7 +79,7 @@ const DanielPreviewDisplayAtom = () => { return ( <> -
+
{previewData.map((data, index) => ( { return ( <> -
+
{footerNavData.map((data, i) => { const { icon, path } = data; diff --git a/src/components/Atoms/HeaderAtom/DanielHeaderTwoAtom.tsx b/src/components/Atoms/HeaderAtom/DanielHeaderTwoAtom.tsx new file mode 100644 index 0000000..48331b3 --- /dev/null +++ b/src/components/Atoms/HeaderAtom/DanielHeaderTwoAtom.tsx @@ -0,0 +1,11 @@ +type Props = { + title: string; +}; + +export const DanielHeaderTwoAtom = (props: Props) => { + return ( +
+
{props.title}
+
+ ); +}; From 0ef02671f908b3b58bf9b87b078628361b63f9c6 Mon Sep 17 00:00:00 2001 From: Devintel Date: Fri, 27 Sep 2024 08:02:08 +0100 Subject: [PATCH 4/4] Refractor and optimize RootStyle, globalLayout, EmptyContainer --- src/app/RootStyleRegistry.tsx | 14 ++---- .../testPage1/container/HomeContainer.tsx | 2 +- src/app/globalLayout.tsx | 12 +++-- .../sample/empty/container/EmptyContainer.tsx | 48 ++++++++++++------- 4 files changed, 45 insertions(+), 31 deletions(-) diff --git a/src/app/RootStyleRegistry.tsx b/src/app/RootStyleRegistry.tsx index 258f10f..418437e 100644 --- a/src/app/RootStyleRegistry.tsx +++ b/src/app/RootStyleRegistry.tsx @@ -1,19 +1,15 @@ "use client"; -import { useState, type PropsWithChildren } from "react"; -import { useServerInsertedHTML } from "next/navigation"; import { createCache, extractStyle, StyleProvider } from "@ant-design/cssinjs"; +import { useServerInsertedHTML } from "next/navigation"; +import { useState, type PropsWithChildren } from "react"; export const RootStyleRegistry = ({ children }: PropsWithChildren) => { const [cache] = useState(() => createCache()); useServerInsertedHTML(() => { - return ( -