diff --git a/package-lock.json b/package-lock.json index a43cf46..8c3d52c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,9 +13,11 @@ "@t3-oss/env-nextjs": "^0.10.1", "antd": "^5.18.0", "geist": "^1.3.0", + "moment": "^2.30.1", "next": "^14.2.1", "react": "^18.3.0", "react-dom": "^18.3.0", + "react-icons": "^5.3.0", "ts-node": "^10.9.2", "valtio": "^1.13.2", "zod": "^3.23.3" @@ -6250,6 +6252,15 @@ "node": ">=16 || 14 >=14.17" } }, + "node_modules/moment": { + "version": "2.30.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz", + "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==", + "license": "MIT", + "engines": { + "node": "*" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -7617,6 +7628,15 @@ "react": "^18.3.1" } }, + "node_modules/react-icons": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz", + "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index 6bacad6..26c717f 100644 --- a/package.json +++ b/package.json @@ -16,9 +16,11 @@ "@t3-oss/env-nextjs": "^0.10.1", "antd": "^5.18.0", "geist": "^1.3.0", + "moment": "^2.30.1", "next": "^14.2.1", "react": "^18.3.0", "react-dom": "^18.3.0", + "react-icons": "^5.3.0", "ts-node": "^10.9.2", "valtio": "^1.13.2", "zod": "^3.23.3" 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 @@ + + + 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/eth.svg b/public/svgs/eth.svg new file mode 100644 index 0000000..36fb4eb --- /dev/null +++ b/public/svgs/eth.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/svgs/feed.svg b/public/svgs/feed.svg new file mode 100644 index 0000000..627b637 --- /dev/null +++ b/public/svgs/feed.svg @@ -0,0 +1,4 @@ + + + + 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..0dc3545 100644 --- a/public/svgs/index.ts +++ b/public/svgs/index.ts @@ -3,3 +3,14 @@ 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 feed } from "./feed.svg"; +export { default as setting } from "./setting.svg"; +export { default as wallet } from "./wallet.svg"; +export { default as history } from "./history.svg"; +export { default as message } from "./message.svg"; +export { default as dollarCircle } from "./dollarCircle.svg"; +export { default as logo } from "./logo.svg"; +export { default as camera } from "./camera.svg"; +export { default as eth } from "./eth.svg"; +export { default as nvr } from "./nvr.svg"; +export { default as node } from "./node.svg"; diff --git a/public/svgs/logo.svg b/public/svgs/logo.svg new file mode 100644 index 0000000..778ad13 --- /dev/null +++ b/public/svgs/logo.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/public/svgs/message.svg b/public/svgs/message.svg new file mode 100644 index 0000000..b1b3232 --- /dev/null +++ b/public/svgs/message.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/svgs/node.svg b/public/svgs/node.svg new file mode 100644 index 0000000..3512553 --- /dev/null +++ b/public/svgs/node.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/svgs/nvr.svg b/public/svgs/nvr.svg new file mode 100644 index 0000000..d0f92ac --- /dev/null +++ b/public/svgs/nvr.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/public/svgs/setting.svg b/public/svgs/setting.svg new file mode 100644 index 0000000..ec6ea71 --- /dev/null +++ b/public/svgs/setting.svg @@ -0,0 +1,10 @@ + + + + + + + + + + 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/globalLayout.tsx b/src/app/globalLayout.tsx index c93b8ff..8f418f3 100644 --- a/src/app/globalLayout.tsx +++ b/src/app/globalLayout.tsx @@ -4,19 +4,23 @@ import SnapshotModal from "~/components/Atoms/Modal/SnapshotModal"; import { RootStyleRegistry } from "./RootStyleRegistry"; import SnapshotDrawerAtom from "~/components/Atoms/DrawerAtom/SnapshotDrawerAtom"; import { SnapshotToastAtom } from "~/components/Atoms/ToastAtom/SnapshotToastAtom"; +import Modal from "~/components/Atoms/Modal/Modal"; +import { useState } from "react"; export default function GlobalLayout({ children, }: { children: React.ReactNode; }) { + const [isModalOpen, setModalOpen] = useState(false); + return ( <> -
+
{children}
- + ); diff --git a/src/app/sample/pageWithModal/container/PageWithModalContainer.tsx b/src/app/sample/pageWithModal/container/PageWithModalContainer.tsx index 9480f14..eb0ac2f 100644 --- a/src/app/sample/pageWithModal/container/PageWithModalContainer.tsx +++ b/src/app/sample/pageWithModal/container/PageWithModalContainer.tsx @@ -1,6 +1,6 @@ import { useRouter } from "next/navigation"; import { useState } from "react"; -import { PageWithModalTemplate } from "~/components/Templates/PageWithModal/PageWithModalTemplate"; +import { PageWithModalTemplate } from "~/components/Templates/PageWithModalTemplate/PageWithModalTemplate"; import ModalStore from "~/store/ModalStore"; export const PageWithModalContainer = () => { @@ -13,6 +13,7 @@ export const PageWithModalContainer = () => { pageWithModalHeaderModuleProps: { title: "PageWithModalHeaderModule", onClickLeftIcon: () => router.back(), + onClickRightIcon: () => router.back(), }, pageWithModalContentModuleProps: { onOpenSnapshotModal: () => diff --git a/src/app/varysoft/testPage1/container/HomeWithModalContainer.tsx b/src/app/varysoft/testPage1/container/HomeWithModalContainer.tsx new file mode 100644 index 0000000..d36b6f9 --- /dev/null +++ b/src/app/varysoft/testPage1/container/HomeWithModalContainer.tsx @@ -0,0 +1,72 @@ +import { useRouter } from "next/navigation"; +import { useState } from "react"; +import { message } from "antd"; +import { HomeWithModalTemplate } from "~/components/Templates/HomeWithModalTemplate/HomeWithModalTemplate"; +import ModalStore from "~/store/ModalStore"; + +export const HomeWithModalContainer = () => { + const router = useRouter(); + const [isCustomModalOpen, setIsCustomModalOpen] = useState(true); + + const headerRightIconClicked = () => { + void message.info("can't go to Settings"); + }; + const pagewithmodalTemplateProps: React.ComponentProps< + typeof HomeWithModalTemplate + > = { + homeWithModalHeaderModuleProps: { + title: "Proxima OS", + onClickLeftIcon: () => router.back(), + onClickRightIcon: headerRightIconClicked, + }, + homeWithModalContentModuleProps: { + 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", + }, + cardProps: [ + { + exchange: "ETH", + message: "User: namulabs is fantasic company...", + user: "N", + timeStamp: "08:43", + src: "eth", + }, + { + exchange: "Nvir", + message: "User: namulabs is fantasic company...", + user: "N", + timeStamp: "08:42", + src: "nvr", + }, + ], + pageInfoProps: { + title: "Messages", + logo: "Proxima", + size: 80, + }, + }, + homeWithModalFooterModuleProps: { + navigation: [ + { path: "#!", icon: "dollarCircle", label: "Home" }, + { path: "/#!", icon: "message", label: "Messages" }, + { path: "/varysoft/testPage1", icon: "wallet", label: "Profile" }, + { path: "/#!", icon: "history", label: "History" }, + ], + }, + }; + + return ; +}; diff --git a/src/app/varysoft/testPage1/page.tsx b/src/app/varysoft/testPage1/page.tsx new file mode 100644 index 0000000..0381d05 --- /dev/null +++ b/src/app/varysoft/testPage1/page.tsx @@ -0,0 +1,8 @@ +"use client"; +import { HomeWithModalContainer } from "./container/HomeWithModalContainer"; + +const HomeWithModal = () => { + return ; +}; + +export default HomeWithModal; diff --git a/src/app/varysoft/testPage2/container/VoteFormContainer.tsx b/src/app/varysoft/testPage2/container/VoteFormContainer.tsx new file mode 100644 index 0000000..639a4d1 --- /dev/null +++ b/src/app/varysoft/testPage2/container/VoteFormContainer.tsx @@ -0,0 +1,51 @@ +import { useRouter } from "next/navigation"; +import { useState } from "react"; +import VoteFormTemplate from "~/components/Templates/VoteForm/VoteFormTemplate"; + +export const VoteFormContainer = () => { + const router = useRouter(); + const [formData, setFormData] = useState({}); + const [loading, setLoading] = useState(false); + + const voteFormTemplateProps: React.ComponentProps = { + formHeaderModuleProps: { + title: "Vote", + }, + formContentModuleProps: { + formCategory: { + name: "category", + label: "Category", + category: [ + { value: "birthday AD", text: "Birthday AD" }, + { value: "announcement", text: "Announcement" }, + { value: "event", text: "Event" }, + ], + }, + formTitle: { + label: "Vote Title", + name: "title", + placeholder: "Title", + }, + formUplaod: { + label: "Image", + name: "image", + icon: "camera", + }, + formDescription: { + label: "Description", + name: "description", + placeholder: "Please write down a description of the event", + }, + formStartDate: { + label: "Start", + name: "start", + }, + formSubmit: { + submit: "Create Vote", + }, + setFormData, + }, + }; + + return ; +}; diff --git a/src/app/varysoft/testPage2/page.tsx b/src/app/varysoft/testPage2/page.tsx new file mode 100644 index 0000000..f745300 --- /dev/null +++ b/src/app/varysoft/testPage2/page.tsx @@ -0,0 +1,8 @@ +"use client"; +import { VoteFormContainer } from "./container/VoteFormContainer"; + +const VoteForm = () => { + return ; +}; + +export default VoteForm; diff --git a/src/components/Atoms/FormContainer/FormContainer.tsx b/src/components/Atoms/FormContainer/FormContainer.tsx new file mode 100644 index 0000000..7cc4fa7 --- /dev/null +++ b/src/components/Atoms/FormContainer/FormContainer.tsx @@ -0,0 +1,21 @@ +import cn from "classnames"; +import { type PropsWithChildren } from "react"; + +type Props = { + style?: React.CSSProperties; + className?: string; +}; + +export const FormContainer = (props: PropsWithChildren) => { + return ( +
+ {props.children} +
+ ); +}; diff --git a/src/components/Atoms/FormHeaderAtom/FormHeaderAtom.tsx b/src/components/Atoms/FormHeaderAtom/FormHeaderAtom.tsx new file mode 100644 index 0000000..2fe4286 --- /dev/null +++ b/src/components/Atoms/FormHeaderAtom/FormHeaderAtom.tsx @@ -0,0 +1,17 @@ +import React from "react"; + +type Props = { + title: string; +}; + +const FormHeaderAtom = (props: Props) => { + return ( +
+
+ {props.title} +
+
+ ); +}; + +export default FormHeaderAtom; diff --git a/src/components/Atoms/HeaderAtom/HeaderAtom.tsx b/src/components/Atoms/HeaderAtom/HeaderAtom.tsx index 414c1a8..4e34e44 100644 --- a/src/components/Atoms/HeaderAtom/HeaderAtom.tsx +++ b/src/components/Atoms/HeaderAtom/HeaderAtom.tsx @@ -1,4 +1,3 @@ -import { SettingOutlined } from "@ant-design/icons"; import SVGAtom from "../SVGAtom/SVGAtom"; type Props = { @@ -9,26 +8,28 @@ type Props = { export const HeaderAtom = (props: Props) => { return ( -
+
{/* Sample using custom svg */} {props.onClickLeftIcon && (
- +
)} -
{props.title}
+
+ {props.title} +
{/* Sample using Antd icon */} {props.onClickRightIcon && (
console.log("Antd icon clicked")} > - +
)}
diff --git a/src/components/Atoms/HomeFooterAtom/HomeFooterAtom.tsx b/src/components/Atoms/HomeFooterAtom/HomeFooterAtom.tsx new file mode 100644 index 0000000..82e88a2 --- /dev/null +++ b/src/components/Atoms/HomeFooterAtom/HomeFooterAtom.tsx @@ -0,0 +1,47 @@ +import React from "react"; +import Link from "next/link"; +import { usePathname } from "next/navigation"; +import type { navs } from "~/interfaces"; +import SVGAtom from "~/components/Atoms/SVGAtom/SVGAtom"; + +type Props = { + navs: navs[]; +}; + +const FooterAtom = (props: Props) => { + const router = usePathname(); // Hook to access current route + const currentPath = router; // Gets the current path + console.log(currentPath); + + return ( +
+ {props.navs.map((navItem) => { + const icon = navItem.icon; + const isActive = currentPath === navItem?.path; + + return ( +
+ {isActive && ( +
+ )} + + + +
+ ); + })} +
+ ); +}; + +export default FooterAtom; diff --git a/src/components/Atoms/LogoAtom/LogoAtom.tsx b/src/components/Atoms/LogoAtom/LogoAtom.tsx new file mode 100644 index 0000000..9411e33 --- /dev/null +++ b/src/components/Atoms/LogoAtom/LogoAtom.tsx @@ -0,0 +1,23 @@ +import React from "react"; +import SVGAtom from "../SVGAtom/SVGAtom"; + +type Props = { + size?: number; + logo?: string; +}; + +const LogoAtom = (props: Props) => { + return ( +
+ +

{props.logo}

+
+ ); +}; + +export default LogoAtom; diff --git a/src/components/Atoms/Modal/Modal.tsx b/src/components/Atoms/Modal/Modal.tsx index b5dbaf8..a3f7e49 100644 --- a/src/components/Atoms/Modal/Modal.tsx +++ b/src/components/Atoms/Modal/Modal.tsx @@ -16,7 +16,7 @@ type Props = { const Modal = (props: PropsWithChildren) => { const [modalContainer, setModalContainer] = useState( - null, + null ); useEffect(() => { @@ -38,16 +38,16 @@ const Modal = (props: PropsWithChildren) => { if (props.isModalOpen) { props.setModalOpen(false); } - }, [props.isModalOpen]); + }, [props]); return ( modalContainer && ReactDOM.createPortal( <> {props.isModalOpen ? ( -
+
@@ -56,7 +56,7 @@ const Modal = (props: PropsWithChildren) => {
) : null} , - modalContainer, + modalContainer ) ); }; diff --git a/src/components/Atoms/ModalContainer/ModalContainer.tsx b/src/components/Atoms/ModalContainer/ModalContainer.tsx index 4f9a392..297c7e6 100644 --- a/src/components/Atoms/ModalContainer/ModalContainer.tsx +++ b/src/components/Atoms/ModalContainer/ModalContainer.tsx @@ -10,8 +10,8 @@ export const ModalContainer = (props: PropsWithChildren) => { return (
diff --git a/src/components/Atoms/NodeAtom/NodeAtom.tsx b/src/components/Atoms/NodeAtom/NodeAtom.tsx new file mode 100644 index 0000000..a2f4bfb --- /dev/null +++ b/src/components/Atoms/NodeAtom/NodeAtom.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import SVGAtom from "../SVGAtom/SVGAtom"; + +const NodeAtom = () => { + return ( +
+ +
+ ); +}; + +export default NodeAtom; diff --git a/src/components/Atoms/SVGAtom/SVGAtom.tsx b/src/components/Atoms/SVGAtom/SVGAtom.tsx index 039c94e..f1e98ff 100644 --- a/src/components/Atoms/SVGAtom/SVGAtom.tsx +++ b/src/components/Atoms/SVGAtom/SVGAtom.tsx @@ -4,8 +4,8 @@ import React from "react"; type Props = { iconName: keyof typeof svgs; color?: string; - width?: number; - height?: number; + width?: number | string; + height?: number | string; onClick?: () => void; style?: React.CSSProperties; className?: string; diff --git a/src/components/Atoms/UserAvatarAtom/UserAvaterAtom.tsx b/src/components/Atoms/UserAvatarAtom/UserAvaterAtom.tsx new file mode 100644 index 0000000..60f7a27 --- /dev/null +++ b/src/components/Atoms/UserAvatarAtom/UserAvaterAtom.tsx @@ -0,0 +1,19 @@ +import React from "react"; + + +type Props = { + size?: number; + user: string; +}; + +const UserAvatarAtom = (props: Props) => { + return ( +
+

{props.user}

+
+ ); +}; + +export default UserAvatarAtom; diff --git a/src/components/Atoms/VoteFormAlertAtom/VoteFormAlertAtom.tsx b/src/components/Atoms/VoteFormAlertAtom/VoteFormAlertAtom.tsx new file mode 100644 index 0000000..65f042b --- /dev/null +++ b/src/components/Atoms/VoteFormAlertAtom/VoteFormAlertAtom.tsx @@ -0,0 +1,12 @@ +import React from "react"; + +const VoteFormAlertAtom = () => { + return ( +
+ 10 FAOwill be deducted + when voting is generated (Amount: 9 FAO) +
+ ); +}; + +export default VoteFormAlertAtom; diff --git a/src/components/Components/EmptyContentComponent/EmptyContentComponent.tsx b/src/components/Components/EmptyContentComponent/EmptyContentComponent.tsx deleted file mode 100644 index 0c36994..0000000 --- a/src/components/Components/EmptyContentComponent/EmptyContentComponent.tsx +++ /dev/null @@ -1,7 +0,0 @@ -type Props = { - // Add props here - }; - -export const EmptyContentComponent = (props: Props) => { - return (
EmptyContentComponent
); -}; \ No newline at end of file diff --git a/src/components/Components/HomeContentComp/HomeContentComp.tsx b/src/components/Components/HomeContentComp/HomeContentComp.tsx new file mode 100644 index 0000000..d46384e --- /dev/null +++ b/src/components/Components/HomeContentComp/HomeContentComp.tsx @@ -0,0 +1,49 @@ +import React from "react"; +import SVGAtom from "~/components/Atoms/SVGAtom/SVGAtom"; +import type { cardList } from "~/interfaces"; +import { PageWithModalContentCustomModal } from "~/components/Components/PageWithModalContentCustomModal/PageWithModalContentCustomModal"; +import MessageHero from "../MessagesHero/MessageHero"; +import UserAvatarAtom from "~/components/Atoms/UserAvatarAtom/UserAvaterAtom"; + +type Props = { + cardProps: cardList[]; + onOpenSnapshotModal: () => void; + modalProps: React.ComponentProps; + pageInfoProps: React.ComponentProps; +}; + +const HomeContentComp = (props: Props) => { + return ( +
+ +
+ {props.cardProps.map((cardList, idx) => ( +
+
+ +
+

{cardList.exchange}

+

{cardList.message}

+
+
+
+

{`${cardList.timeStamp}PM`}

+ +
+
+ ))} + +
+
+ ); +}; + +export default HomeContentComp; diff --git a/src/components/Components/MessagesHero/MessageHero.tsx b/src/components/Components/MessagesHero/MessageHero.tsx new file mode 100644 index 0000000..f1bc1ad --- /dev/null +++ b/src/components/Components/MessagesHero/MessageHero.tsx @@ -0,0 +1,17 @@ +import React from "react"; +import LogoAtom from "~/components/Atoms/LogoAtom/LogoAtom"; + +type Props = { + title: string; + logo: string; + size: number; +}; +const MessageHero = (props: Props) => { + return ( +
+

{props.title}

+ +
+ ); +}; +export default MessageHero; diff --git a/src/components/Components/PageWithModalContentCustomModal/PageWithModalContentCustomModal.tsx b/src/components/Components/PageWithModalContentCustomModal/PageWithModalContentCustomModal.tsx index edd9a9b..735e39c 100644 --- a/src/components/Components/PageWithModalContentCustomModal/PageWithModalContentCustomModal.tsx +++ b/src/components/Components/PageWithModalContentCustomModal/PageWithModalContentCustomModal.tsx @@ -1,5 +1,6 @@ import { Button } from "antd"; import Modal from "~/components/Atoms/Modal/Modal"; +import NodeAtom from "~/components/Atoms/NodeAtom/NodeAtom"; type Props = { modalProps: React.ComponentProps; @@ -10,12 +11,12 @@ type Props = { export const PageWithModalContentCustomModal = (props: Props) => { return ( -
-

{props.title}

-

{props.description}

- +
+

+ {props.title} +

+ +

{props.description}

); diff --git a/src/components/Components/VoteFormContent/VoteFormAlert.tsx b/src/components/Components/VoteFormContent/VoteFormAlert.tsx new file mode 100644 index 0000000..b3c3095 --- /dev/null +++ b/src/components/Components/VoteFormContent/VoteFormAlert.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import VoteFormAlertAtom from "~/components/Atoms/VoteFormAlertAtom/VoteFormAlertAtom"; + +const VoteFormAlert = () => { + return ( +
+ +
+ ); +}; + +export default VoteFormAlert; diff --git a/src/components/Components/VoteFormContent/VoteFormCategory.tsx b/src/components/Components/VoteFormContent/VoteFormCategory.tsx new file mode 100644 index 0000000..2ae545e --- /dev/null +++ b/src/components/Components/VoteFormContent/VoteFormCategory.tsx @@ -0,0 +1,27 @@ +import React from "react"; +import { Form, Select, type SelectProps } from "antd"; + +type Props = { + label: string; + category: SelectProps["options"]; + name: string; +}; + +const VoteFormCategory = (props: Props) => { + return ( + +