From 7ff7929b7bfdc450388b6a79fbd3d0b1c1ffcfd6 Mon Sep 17 00:00:00 2001 From: Favour Emmanuel Date: Sun, 6 Oct 2024 07:24:19 +0100 Subject: [PATCH 1/8] finished testPage1 UI --- package-lock.json | 20 ++++++ package.json | 2 + public/svgs/camera.svg | 3 + public/svgs/dollarCircle.svg | 3 + public/svgs/eth.svg | 9 +++ public/svgs/feed.svg | 4 ++ public/svgs/history.svg | 3 + public/svgs/index.ts | 7 ++ public/svgs/logo.svg | 17 +++++ public/svgs/message.svg | 3 + public/svgs/node.svg | 9 +++ public/svgs/nvr.svg | 20 ++++++ public/svgs/setting.svg | 10 +++ public/svgs/wallet.svg | 3 + src/app/globalLayout.tsx | 8 ++- .../container/PageWithModalContainer.tsx | 3 +- .../container/HomeWithModalContainer.tsx | 70 +++++++++++++++++++ src/app/varysoft/testPage1/page.tsx | 8 +++ .../Atoms/AvatarAtom/AvatarAtom.tsx | 24 +++++++ .../Atoms/FormHeaderAtom/FormHeaderAtom.tsx | 17 +++++ .../Atoms/HeaderAtom/HeaderAtom.tsx | 14 ++-- .../Atoms/HomeFooterAtom/HomeFooterAtom.tsx | 57 +++++++++++++++ src/components/Atoms/LogoAtom/LogoAtom.tsx | 24 +++++++ src/components/Atoms/Modal/Modal.tsx | 10 +-- .../Atoms/ModalContainer/ModalContainer.tsx | 4 +- src/components/Atoms/NodeAtom/NodeAtom.tsx | 12 ++++ .../Atoms/UserAvatarAtom/UserAvaterAtom.tsx | 19 +++++ .../EmptyContentComponent.tsx | 7 -- .../HomeContentComp/HomeContentComp.tsx | 55 +++++++++++++++ .../Components/MessagesHero/MessageHero.tsx | 16 +++++ .../PageWithModalContentCustomModal.tsx | 13 ++-- .../EmtpyContentComponent.tsx | 7 ++ .../Modules/Empty/EmptyContentModule.tsx | 4 +- .../Modules/Empty/EmptyFooterModule.tsx | 14 ++-- .../Modules/Home/HomeFooterModule.tsx | 1 - .../Home/HomeWithModalContentModule.tsx | 20 ++++++ .../Home/HomeWithModalFooterModule.tsx | 14 ++++ .../Home/HomeWithModalHeaderModule.tsx | 17 +++++ .../PageWithForm/PageWithFormFormModule.tsx | 2 +- .../PageWithForm/PageWithFormHeaderModule.tsx | 2 +- .../PageWithModalContentModule.tsx | 18 ++--- .../PageWithModalHeaderModule.tsx | 7 +- .../HomeWithModalTemplate.tsx | 42 +++++++++++ .../PageWithForm/PageWithFormTemplate.tsx | 2 +- .../PageWithModalTemplate.tsx | 0 src/styles/globals.css | 8 ++- 46 files changed, 573 insertions(+), 59 deletions(-) create mode 100644 public/svgs/camera.svg create mode 100644 public/svgs/dollarCircle.svg create mode 100644 public/svgs/eth.svg create mode 100644 public/svgs/feed.svg create mode 100644 public/svgs/history.svg create mode 100644 public/svgs/logo.svg create mode 100644 public/svgs/message.svg create mode 100644 public/svgs/node.svg create mode 100644 public/svgs/nvr.svg create mode 100644 public/svgs/setting.svg create mode 100644 public/svgs/wallet.svg create mode 100644 src/app/varysoft/testPage1/container/HomeWithModalContainer.tsx create mode 100644 src/app/varysoft/testPage1/page.tsx create mode 100644 src/components/Atoms/AvatarAtom/AvatarAtom.tsx create mode 100644 src/components/Atoms/FormHeaderAtom/FormHeaderAtom.tsx create mode 100644 src/components/Atoms/HomeFooterAtom/HomeFooterAtom.tsx create mode 100644 src/components/Atoms/LogoAtom/LogoAtom.tsx create mode 100644 src/components/Atoms/NodeAtom/NodeAtom.tsx create mode 100644 src/components/Atoms/UserAvatarAtom/UserAvaterAtom.tsx delete mode 100644 src/components/Components/EmptyContentComponent/EmptyContentComponent.tsx create mode 100644 src/components/Components/HomeContentComp/HomeContentComp.tsx create mode 100644 src/components/Components/MessagesHero/MessageHero.tsx create mode 100644 src/components/EmptyContentComponent/EmtpyContentComponent.tsx create mode 100644 src/components/Modules/Home/HomeWithModalContentModule.tsx create mode 100644 src/components/Modules/Home/HomeWithModalFooterModule.tsx create mode 100644 src/components/Modules/Home/HomeWithModalHeaderModule.tsx create mode 100644 src/components/Templates/HomeWithModalTemplate/HomeWithModalTemplate.tsx rename src/components/Templates/{PageWithModal => PageWithModalTemplate}/PageWithModalTemplate.tsx (100%) 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..0377f94 100644 --- a/public/svgs/index.ts +++ b/public/svgs/index.ts @@ -3,3 +3,10 @@ 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"; 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..4060302 --- /dev/null +++ b/src/app/varysoft/testPage1/container/HomeWithModalContainer.tsx @@ -0,0 +1,70 @@ +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.svg", + }, + { + exchange: "Nvir", + message: "User: namulabs is fantasic company...", + user: "N", + timeStamp: "08:42", + src: "nvr.svg", + }, + ], + pageInfoProps: { + title: "Messages", + }, + }, + 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/components/Atoms/AvatarAtom/AvatarAtom.tsx b/src/components/Atoms/AvatarAtom/AvatarAtom.tsx new file mode 100644 index 0000000..e891815 --- /dev/null +++ b/src/components/Atoms/AvatarAtom/AvatarAtom.tsx @@ -0,0 +1,24 @@ +import React from "react"; +import Image from "next/image"; + +interface AvatarProps { + src: string; + alt: string; + size?: number; +} + +const AvatarAtom: React.FC = ({ src, alt, size = 40 }) => { + return ( +
+ {alt} +
+ ); +}; + +export default AvatarAtom; diff --git a/src/components/Atoms/FormHeaderAtom/FormHeaderAtom.tsx b/src/components/Atoms/FormHeaderAtom/FormHeaderAtom.tsx new file mode 100644 index 0000000..7f80418 --- /dev/null +++ b/src/components/Atoms/FormHeaderAtom/FormHeaderAtom.tsx @@ -0,0 +1,17 @@ +import React from "react"; + +interface 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..7c82856 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}
+
+ {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..09cde54 --- /dev/null +++ b/src/components/Atoms/HomeFooterAtom/HomeFooterAtom.tsx @@ -0,0 +1,57 @@ +import React from "react"; +import Link from "next/link"; +import { useRouter, usePathname } from "next/navigation"; +import { FaHome, FaHistory, FaUser } from "react-icons/fa"; +import { IconType } from "react-icons"; +import { FaMessage } from "react-icons/fa6"; +import Image from "next/image"; +import * as svgs from "public/svgs"; +import SVGAtom from "~/components/Atoms/SVGAtom/SVGAtom"; + +interface navs { + path: string; + label: string; + icon: keyof typeof svgs; +} + +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..7c27d90 --- /dev/null +++ b/src/components/Atoms/LogoAtom/LogoAtom.tsx @@ -0,0 +1,24 @@ +import React from "react"; +import Image from "next/image"; +import SVGAtom from "../SVGAtom/SVGAtom"; + +type Props = { + alt: string; + size?: number; +}; + +const LogoAtom = (props: Props) => { + return ( +
+ +

Proxima

+
+ ); +}; + +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..26e7756 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..4586525 --- /dev/null +++ b/src/components/Atoms/NodeAtom/NodeAtom.tsx @@ -0,0 +1,12 @@ +import Image from "next/image"; +import React from "react"; + +const NodeAtom: React.FC = () => { + return ( +
+ node-img +
+ ); +}; + +export default NodeAtom; diff --git a/src/components/Atoms/UserAvatarAtom/UserAvaterAtom.tsx b/src/components/Atoms/UserAvatarAtom/UserAvaterAtom.tsx new file mode 100644 index 0000000..17ad40a --- /dev/null +++ b/src/components/Atoms/UserAvatarAtom/UserAvaterAtom.tsx @@ -0,0 +1,19 @@ +import React from "react"; +import Image from "next/image"; + +type Props = { + size?: number; + user: string; +}; + +const UserAvatarAtom = (props: Props) => { + return ( +
+

{props.user}

+
+ ); +}; + +export default UserAvatarAtom; 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..f41e977 --- /dev/null +++ b/src/components/Components/HomeContentComp/HomeContentComp.tsx @@ -0,0 +1,55 @@ +import React from "react"; +import AvatarAtom from "~/components/Atoms/AvatarAtom/AvatarAtom"; +import UserAvatar from "~/components/Atoms/UserAvatarAtom/UserAvaterAtom"; +import { PageWithModalContentCustomModal } from "~/components/Components/PageWithModalContentCustomModal/PageWithModalContentCustomModal"; +import MessageHero from "../MessagesHero/MessageHero"; +import UserAvatarAtom from "~/components/Atoms/UserAvatarAtom/UserAvaterAtom"; + +interface CardList { + exchange: string; + message: string; + user: string; + timeStamp: string; + src: string; +} +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..78a5ced --- /dev/null +++ b/src/components/Components/MessagesHero/MessageHero.tsx @@ -0,0 +1,16 @@ +import React from "react"; +import LogoAtom from "~/components/Atoms/LogoAtom/LogoAtom"; + +type Props = { + title: string; +}; +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..8eb56ed 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/EmptyContentComponent/EmtpyContentComponent.tsx b/src/components/EmptyContentComponent/EmtpyContentComponent.tsx new file mode 100644 index 0000000..5e434fc --- /dev/null +++ b/src/components/EmptyContentComponent/EmtpyContentComponent.tsx @@ -0,0 +1,7 @@ +type Props = { + // Add props here +}; + +export const EmptyContentComponent = (props: Props) => { + return
EmptyContentComponent
; +}; diff --git a/src/components/Modules/Empty/EmptyContentModule.tsx b/src/components/Modules/Empty/EmptyContentModule.tsx index d3d5bd1..f9ec817 100644 --- a/src/components/Modules/Empty/EmptyContentModule.tsx +++ b/src/components/Modules/Empty/EmptyContentModule.tsx @@ -1,5 +1,5 @@ import { EmptyContentAtom } from "~/components/Atoms/EmptyContentAtom/EmptyContentAtom"; -import { EmptyContentComponent } from "~/components/Components/EmptyContentComponent/EmptyContentComponent"; +import { EmptyContentComponent } from "~/components/EmptyContentComponent/EmtpyContentComponent"; type Props = { moduleProps: string; @@ -9,7 +9,7 @@ type Props = { export const EmptyContentModule = (props: Props) => { return ( -
+

{props.moduleProps}

diff --git a/src/components/Modules/Empty/EmptyFooterModule.tsx b/src/components/Modules/Empty/EmptyFooterModule.tsx index 9084931..55ef3c2 100644 --- a/src/components/Modules/Empty/EmptyFooterModule.tsx +++ b/src/components/Modules/Empty/EmptyFooterModule.tsx @@ -1,9 +1,9 @@ -import { FooterAtom } from "~/components/Atoms/FooterAtom/FooterAtom"; +// import { FooterAtom } from "~/components/Atoms/FooterAtom/FooterAtom"; -type Props = { - footerProps: React.ComponentProps; -}; +// type Props = { +// footerProps: React.ComponentProps; +// }; -export const EmptyFooterModule = (props: Props) => { - return ; -}; +// export const EmptyFooterModule = (props: Props) => { +// return ; +// }; diff --git a/src/components/Modules/Home/HomeFooterModule.tsx b/src/components/Modules/Home/HomeFooterModule.tsx index 9456859..55cbb66 100644 --- a/src/components/Modules/Home/HomeFooterModule.tsx +++ b/src/components/Modules/Home/HomeFooterModule.tsx @@ -1,5 +1,4 @@ import { FooterAtom } from "~/components/Atoms/FooterAtom/FooterAtom"; - type Props = { title: string; }; diff --git a/src/components/Modules/Home/HomeWithModalContentModule.tsx b/src/components/Modules/Home/HomeWithModalContentModule.tsx new file mode 100644 index 0000000..e2206b6 --- /dev/null +++ b/src/components/Modules/Home/HomeWithModalContentModule.tsx @@ -0,0 +1,20 @@ +import HomeContentComp from "~/components/Components/HomeContentComp/HomeContentComp"; +import type MessageHero from "~/components/Components/MessagesHero/MessageHero"; +import type { PageWithModalContentCustomModal } from "~/components/Components/PageWithModalContentCustomModal/PageWithModalContentCustomModal"; +interface CardList { + exchange: string; + message: string; + user: string; + timeStamp: string; + src: string; +} +type Props = { + cardProps: CardList[]; + onOpenSnapshotModal: () => void; + modalProps: React.ComponentProps; + pageInfoProps: React.ComponentProps; +}; + +export const HomeWithModalContentModule = (props: Props) => { + return ; +}; diff --git a/src/components/Modules/Home/HomeWithModalFooterModule.tsx b/src/components/Modules/Home/HomeWithModalFooterModule.tsx new file mode 100644 index 0000000..fe0d15c --- /dev/null +++ b/src/components/Modules/Home/HomeWithModalFooterModule.tsx @@ -0,0 +1,14 @@ +import FooterAtom from "~/components/Atoms/HomeFooterAtom/HomeFooterAtom"; +import * as svgs from "public/svgs"; +interface navs { + path: string; + label: string; + icon: keyof typeof svgs; +} +type Props = { + navigation: navs[]; +}; + +export const HomeWithModalFooterModule = (props: Props) => { + return ; +}; diff --git a/src/components/Modules/Home/HomeWithModalHeaderModule.tsx b/src/components/Modules/Home/HomeWithModalHeaderModule.tsx new file mode 100644 index 0000000..288351f --- /dev/null +++ b/src/components/Modules/Home/HomeWithModalHeaderModule.tsx @@ -0,0 +1,17 @@ +import { HeaderAtom } from "~/components/Atoms/HeaderAtom/HeaderAtom"; + +type Props = { + title: string; + onClickLeftIcon: () => void; + onClickRightIcon: () => void; +}; + +export const HomeWithModalHeaderModule = (props: Props) => { + return ( + + ); +}; diff --git a/src/components/Modules/PageWithForm/PageWithFormFormModule.tsx b/src/components/Modules/PageWithForm/PageWithFormFormModule.tsx index d9607f6..b78bbc2 100644 --- a/src/components/Modules/PageWithForm/PageWithFormFormModule.tsx +++ b/src/components/Modules/PageWithForm/PageWithFormFormModule.tsx @@ -116,4 +116,4 @@ export const PageWithFormFormModule = (props: Props) => {
); -}; +}; \ No newline at end of file diff --git a/src/components/Modules/PageWithForm/PageWithFormHeaderModule.tsx b/src/components/Modules/PageWithForm/PageWithFormHeaderModule.tsx index b52c417..0503a54 100644 --- a/src/components/Modules/PageWithForm/PageWithFormHeaderModule.tsx +++ b/src/components/Modules/PageWithForm/PageWithFormHeaderModule.tsx @@ -9,4 +9,4 @@ export const PageWithFormHeaderModule = (props: Props) => { return ( ); -}; +}; \ No newline at end of file diff --git a/src/components/Modules/PageWithModal/PageWithModalContentModule.tsx b/src/components/Modules/PageWithModal/PageWithModalContentModule.tsx index a2f333b..4c08805 100644 --- a/src/components/Modules/PageWithModal/PageWithModalContentModule.tsx +++ b/src/components/Modules/PageWithModal/PageWithModalContentModule.tsx @@ -8,24 +8,14 @@ type Props = { export const PageWithModalContentModule = (props: Props) => { return ( -
+
-
- -
-
diff --git a/src/components/Modules/PageWithModal/PageWithModalHeaderModule.tsx b/src/components/Modules/PageWithModal/PageWithModalHeaderModule.tsx index 7d01f23..16a5d10 100644 --- a/src/components/Modules/PageWithModal/PageWithModalHeaderModule.tsx +++ b/src/components/Modules/PageWithModal/PageWithModalHeaderModule.tsx @@ -3,10 +3,15 @@ import { HeaderAtom } from "~/components/Atoms/HeaderAtom/HeaderAtom"; type Props = { title: string; onClickLeftIcon: () => void; + onClickRightIcon: () => void; }; export const PageWithModalHeaderModule = (props: Props) => { return ( - + ); }; diff --git a/src/components/Templates/HomeWithModalTemplate/HomeWithModalTemplate.tsx b/src/components/Templates/HomeWithModalTemplate/HomeWithModalTemplate.tsx new file mode 100644 index 0000000..0159918 --- /dev/null +++ b/src/components/Templates/HomeWithModalTemplate/HomeWithModalTemplate.tsx @@ -0,0 +1,42 @@ +import { Layout } from "antd"; +import { Content, Header } from "antd/es/layout/layout"; +import { HomeWithModalFooterModule } from "~/components/Modules/Home/HomeWithModalFooterModule"; +import { HomeWithModalHeaderModule } from "~/components/Modules/Home/HomeWithModalHeaderModule"; +import { HomeWithModalContentModule } from "~/components/Modules/Home/HomeWithModalContentModule"; + +type Props = { + homeWithModalHeaderModuleProps: React.ComponentProps< + typeof HomeWithModalHeaderModule + >; + homeWithModalContentModuleProps: React.ComponentProps< + typeof HomeWithModalContentModule + >; + homeWithModalFooterModuleProps: React.ComponentProps< + typeof HomeWithModalFooterModule + >; +}; + +export const HomeWithModalTemplate = (props: Props) => { + return ( + +
+ +
+ + + + + + + + ); +}; diff --git a/src/components/Templates/PageWithForm/PageWithFormTemplate.tsx b/src/components/Templates/PageWithForm/PageWithFormTemplate.tsx index edff0ac..422d764 100644 --- a/src/components/Templates/PageWithForm/PageWithFormTemplate.tsx +++ b/src/components/Templates/PageWithForm/PageWithFormTemplate.tsx @@ -23,4 +23,4 @@ export const PageWithFormTemplate = (props: Props) => { ); -}; +}; \ No newline at end of file diff --git a/src/components/Templates/PageWithModal/PageWithModalTemplate.tsx b/src/components/Templates/PageWithModalTemplate/PageWithModalTemplate.tsx similarity index 100% rename from src/components/Templates/PageWithModal/PageWithModalTemplate.tsx rename to src/components/Templates/PageWithModalTemplate/PageWithModalTemplate.tsx diff --git a/src/styles/globals.css b/src/styles/globals.css index 778c42d..7e10793 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -7,10 +7,14 @@ -ms-overflow-style: none; scrollbar-width: none; } +.form-scroll { + -ms-overflow-style: inherit; + scrollbar-width: auto; +} -*::-webkit-scrollbar { +/* *::-webkit-scrollbar { display: none; -} +} */ /* Remove Scroll Bar : End */ /* Set Link Color */ From ef4fb95d4cc780b5b2362148cf03e29eea730104 Mon Sep 17 00:00:00 2001 From: Favour Emmanuel Date: Sun, 6 Oct 2024 07:43:19 +0100 Subject: [PATCH 2/8] fixed type issues --- src/components/Modules/Home/HomeWithModalFooterModule.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Modules/Home/HomeWithModalFooterModule.tsx b/src/components/Modules/Home/HomeWithModalFooterModule.tsx index fe0d15c..51be062 100644 --- a/src/components/Modules/Home/HomeWithModalFooterModule.tsx +++ b/src/components/Modules/Home/HomeWithModalFooterModule.tsx @@ -1,5 +1,5 @@ import FooterAtom from "~/components/Atoms/HomeFooterAtom/HomeFooterAtom"; -import * as svgs from "public/svgs"; +import type * as svgs from "public/svgs"; interface navs { path: string; label: string; From 80530ae29794f0817b7fdf44380b5398247a716b Mon Sep 17 00:00:00 2001 From: Favour Emmanuel Date: Sun, 6 Oct 2024 08:21:04 +0100 Subject: [PATCH 3/8] card ui changes --- public/svgs/index.ts | 2 ++ public/svgs/nvr.svg | 16 ++++++------- .../container/HomeWithModalContainer.tsx | 4 ++-- .../Atoms/AvatarAtom/AvatarAtom.tsx | 24 ------------------- .../HomeContentComp/HomeContentComp.tsx | 21 ++++++++-------- 5 files changed, 23 insertions(+), 44 deletions(-) delete mode 100644 src/components/Atoms/AvatarAtom/AvatarAtom.tsx diff --git a/public/svgs/index.ts b/public/svgs/index.ts index 0377f94..8f75ddf 100644 --- a/public/svgs/index.ts +++ b/public/svgs/index.ts @@ -10,3 +10,5 @@ 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 nvr } from "./nvr.svg"; +export { default as eth } from "./eth.svg"; diff --git a/public/svgs/nvr.svg b/public/svgs/nvr.svg index d0f92ac..de25b49 100644 --- a/public/svgs/nvr.svg +++ b/public/svgs/nvr.svg @@ -1,20 +1,20 @@ - - + + - + - - + + - - + + - + diff --git a/src/app/varysoft/testPage1/container/HomeWithModalContainer.tsx b/src/app/varysoft/testPage1/container/HomeWithModalContainer.tsx index 4060302..7d66b2c 100644 --- a/src/app/varysoft/testPage1/container/HomeWithModalContainer.tsx +++ b/src/app/varysoft/testPage1/container/HomeWithModalContainer.tsx @@ -42,14 +42,14 @@ export const HomeWithModalContainer = () => { message: "User: namulabs is fantasic company...", user: "N", timeStamp: "08:43", - src: "eth.svg", + src: "eth", }, { exchange: "Nvir", message: "User: namulabs is fantasic company...", user: "N", timeStamp: "08:42", - src: "nvr.svg", + src: "nvr", }, ], pageInfoProps: { diff --git a/src/components/Atoms/AvatarAtom/AvatarAtom.tsx b/src/components/Atoms/AvatarAtom/AvatarAtom.tsx deleted file mode 100644 index e891815..0000000 --- a/src/components/Atoms/AvatarAtom/AvatarAtom.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from "react"; -import Image from "next/image"; - -interface AvatarProps { - src: string; - alt: string; - size?: number; -} - -const AvatarAtom: React.FC = ({ src, alt, size = 40 }) => { - return ( -
- {alt} -
- ); -}; - -export default AvatarAtom; diff --git a/src/components/Components/HomeContentComp/HomeContentComp.tsx b/src/components/Components/HomeContentComp/HomeContentComp.tsx index f41e977..7a43ff4 100644 --- a/src/components/Components/HomeContentComp/HomeContentComp.tsx +++ b/src/components/Components/HomeContentComp/HomeContentComp.tsx @@ -1,6 +1,6 @@ import React from "react"; -import AvatarAtom from "~/components/Atoms/AvatarAtom/AvatarAtom"; -import UserAvatar from "~/components/Atoms/UserAvatarAtom/UserAvaterAtom"; +import SVGAtom from "~/components/Atoms/SVGAtom/SVGAtom"; +import type * as svgs from "public/svgs"; import { PageWithModalContentCustomModal } from "~/components/Components/PageWithModalContentCustomModal/PageWithModalContentCustomModal"; import MessageHero from "../MessagesHero/MessageHero"; import UserAvatarAtom from "~/components/Atoms/UserAvatarAtom/UserAvaterAtom"; @@ -10,7 +10,7 @@ interface CardList { message: string; user: string; timeStamp: string; - src: string; + src: keyof typeof svgs; } type Props = { cardProps: CardList[]; @@ -23,17 +23,18 @@ const HomeContentComp = (props: Props) => { return (
-
+
{props.cardProps.map((cardList, idx) => (
-
- +

{cardList.exchange}

From f4474328525ee9f1eafd4c2ac09ddd583437ae08 Mon Sep 17 00:00:00 2001 From: Favour Emmanuel Date: Sun, 6 Oct 2024 12:46:38 +0100 Subject: [PATCH 4/8] final cleanup --- public/svgs/index.ts | 1 + .../Atoms/HomeFooterAtom/HomeFooterAtom.tsx | 14 ++------------ src/components/Atoms/LogoAtom/LogoAtom.tsx | 2 -- src/components/Atoms/NodeAtom/NodeAtom.tsx | 8 ++++---- .../Components/HomeContentComp/HomeContentComp.tsx | 11 ++--------- .../Components/MessagesHero/MessageHero.tsx | 2 +- .../Modules/Home/HomeWithModalContentModule.tsx | 11 +++-------- .../Modules/Home/HomeWithModalFooterModule.tsx | 8 ++------ src/interfaces.tsx | 14 ++++++++++++++ 9 files changed, 29 insertions(+), 42 deletions(-) create mode 100644 src/interfaces.tsx diff --git a/public/svgs/index.ts b/public/svgs/index.ts index 8f75ddf..5db7d71 100644 --- a/public/svgs/index.ts +++ b/public/svgs/index.ts @@ -12,3 +12,4 @@ export { default as dollarCircle } from "./dollarCircle.svg"; export { default as logo } from "./logo.svg"; export { default as nvr } from "./nvr.svg"; export { default as eth } from "./eth.svg"; +export { default as node } from "./node.svg"; diff --git a/src/components/Atoms/HomeFooterAtom/HomeFooterAtom.tsx b/src/components/Atoms/HomeFooterAtom/HomeFooterAtom.tsx index 09cde54..82e88a2 100644 --- a/src/components/Atoms/HomeFooterAtom/HomeFooterAtom.tsx +++ b/src/components/Atoms/HomeFooterAtom/HomeFooterAtom.tsx @@ -1,19 +1,9 @@ import React from "react"; import Link from "next/link"; -import { useRouter, usePathname } from "next/navigation"; -import { FaHome, FaHistory, FaUser } from "react-icons/fa"; -import { IconType } from "react-icons"; -import { FaMessage } from "react-icons/fa6"; -import Image from "next/image"; -import * as svgs from "public/svgs"; +import { usePathname } from "next/navigation"; +import type { navs } from "~/interfaces"; import SVGAtom from "~/components/Atoms/SVGAtom/SVGAtom"; -interface navs { - path: string; - label: string; - icon: keyof typeof svgs; -} - type Props = { navs: navs[]; }; diff --git a/src/components/Atoms/LogoAtom/LogoAtom.tsx b/src/components/Atoms/LogoAtom/LogoAtom.tsx index 7c27d90..9b37dfa 100644 --- a/src/components/Atoms/LogoAtom/LogoAtom.tsx +++ b/src/components/Atoms/LogoAtom/LogoAtom.tsx @@ -1,9 +1,7 @@ import React from "react"; -import Image from "next/image"; import SVGAtom from "../SVGAtom/SVGAtom"; type Props = { - alt: string; size?: number; }; diff --git a/src/components/Atoms/NodeAtom/NodeAtom.tsx b/src/components/Atoms/NodeAtom/NodeAtom.tsx index 4586525..1128da9 100644 --- a/src/components/Atoms/NodeAtom/NodeAtom.tsx +++ b/src/components/Atoms/NodeAtom/NodeAtom.tsx @@ -1,10 +1,10 @@ -import Image from "next/image"; import React from "react"; +import SVGAtom from "../SVGAtom/SVGAtom"; -const NodeAtom: React.FC = () => { +const NodeAtom = () => { return ( -
- node-img +
+
); }; diff --git a/src/components/Components/HomeContentComp/HomeContentComp.tsx b/src/components/Components/HomeContentComp/HomeContentComp.tsx index 7a43ff4..d46384e 100644 --- a/src/components/Components/HomeContentComp/HomeContentComp.tsx +++ b/src/components/Components/HomeContentComp/HomeContentComp.tsx @@ -1,19 +1,12 @@ import React from "react"; import SVGAtom from "~/components/Atoms/SVGAtom/SVGAtom"; -import type * as svgs from "public/svgs"; +import type { cardList } from "~/interfaces"; import { PageWithModalContentCustomModal } from "~/components/Components/PageWithModalContentCustomModal/PageWithModalContentCustomModal"; import MessageHero from "../MessagesHero/MessageHero"; import UserAvatarAtom from "~/components/Atoms/UserAvatarAtom/UserAvaterAtom"; -interface CardList { - exchange: string; - message: string; - user: string; - timeStamp: string; - src: keyof typeof svgs; -} type Props = { - cardProps: CardList[]; + cardProps: cardList[]; onOpenSnapshotModal: () => void; modalProps: React.ComponentProps; pageInfoProps: React.ComponentProps; diff --git a/src/components/Components/MessagesHero/MessageHero.tsx b/src/components/Components/MessagesHero/MessageHero.tsx index 78a5ced..4541f52 100644 --- a/src/components/Components/MessagesHero/MessageHero.tsx +++ b/src/components/Components/MessagesHero/MessageHero.tsx @@ -8,7 +8,7 @@ const MessageHero = (props: Props) => { return (

{props.title}

- +
); }; diff --git a/src/components/Modules/Home/HomeWithModalContentModule.tsx b/src/components/Modules/Home/HomeWithModalContentModule.tsx index e2206b6..a01f82b 100644 --- a/src/components/Modules/Home/HomeWithModalContentModule.tsx +++ b/src/components/Modules/Home/HomeWithModalContentModule.tsx @@ -1,15 +1,10 @@ import HomeContentComp from "~/components/Components/HomeContentComp/HomeContentComp"; import type MessageHero from "~/components/Components/MessagesHero/MessageHero"; +import type { cardList } from "~/interfaces"; import type { PageWithModalContentCustomModal } from "~/components/Components/PageWithModalContentCustomModal/PageWithModalContentCustomModal"; -interface CardList { - exchange: string; - message: string; - user: string; - timeStamp: string; - src: string; -} + type Props = { - cardProps: CardList[]; + cardProps: cardList[]; onOpenSnapshotModal: () => void; modalProps: React.ComponentProps; pageInfoProps: React.ComponentProps; diff --git a/src/components/Modules/Home/HomeWithModalFooterModule.tsx b/src/components/Modules/Home/HomeWithModalFooterModule.tsx index 51be062..201c24d 100644 --- a/src/components/Modules/Home/HomeWithModalFooterModule.tsx +++ b/src/components/Modules/Home/HomeWithModalFooterModule.tsx @@ -1,10 +1,6 @@ import FooterAtom from "~/components/Atoms/HomeFooterAtom/HomeFooterAtom"; -import type * as svgs from "public/svgs"; -interface navs { - path: string; - label: string; - icon: keyof typeof svgs; -} +import type { navs } from "~/interfaces"; + type Props = { navigation: navs[]; }; diff --git a/src/interfaces.tsx b/src/interfaces.tsx new file mode 100644 index 0000000..fe346dc --- /dev/null +++ b/src/interfaces.tsx @@ -0,0 +1,14 @@ +import type * as svgs from "public/svgs"; + +export interface cardList { + exchange: string; + message: string; + user: string; + timeStamp: string; + src: keyof typeof svgs; +} +export interface navs { + path: string; + label: string; + icon: keyof typeof svgs; +} From 36dc83326606623986af4e238ea74f68997b9505 Mon Sep 17 00:00:00 2001 From: Favour Emmanuel Date: Sun, 6 Oct 2024 18:50:27 +0100 Subject: [PATCH 5/8] done with UI for testPage2 --- public/svgs/index.ts | 4 +- public/svgs/nvr.svg | 16 ++--- .../testPage2/container/VoteFormContainer.tsx | 51 +++++++++++++ src/app/varysoft/testPage2/page.tsx | 8 +++ .../Atoms/FormContainer/FormContainer.tsx | 21 ++++++ .../Atoms/FormHeaderAtom/FormHeaderAtom.tsx | 4 +- .../Atoms/HeaderAtom/HeaderAtom.tsx | 1 - src/components/Atoms/SVGAtom/SVGAtom.tsx | 4 +- .../Atoms/UserAvatarAtom/UserAvaterAtom.tsx | 2 +- .../VoteFormAlertAtom/VoteFormAlertAtom.tsx | 12 ++++ .../VoteFormContent/VoteFormAlert.tsx | 12 ++++ .../VoteFormContent/VoteFormCategory.tsx | 27 +++++++ .../VoteFormContent/VoteFormDate.tsx | 21 ++++++ .../VoteFormContent/VoteFormDescription.tsx | 23 ++++++ .../VoteFormContent/VoteFormSubmit.tsx | 22 ++++++ .../VoteFormContent/VoteFormTitle.tsx | 20 ++++++ .../VoteFormContent/VoteFormUpload.tsx | 54 ++++++++++++++ .../VoteForm/VoteFormContentModule.tsx | 71 +++++++++++++++++++ .../Modules/VoteForm/VoteFormHeaderModule.tsx | 11 +++ .../Templates/VoteForm/VoteFormTemplate.tsx | 25 +++++++ 20 files changed, 393 insertions(+), 16 deletions(-) create mode 100644 src/app/varysoft/testPage2/container/VoteFormContainer.tsx create mode 100644 src/app/varysoft/testPage2/page.tsx create mode 100644 src/components/Atoms/FormContainer/FormContainer.tsx create mode 100644 src/components/Atoms/VoteFormAlertAtom/VoteFormAlertAtom.tsx create mode 100644 src/components/Components/VoteFormContent/VoteFormAlert.tsx create mode 100644 src/components/Components/VoteFormContent/VoteFormCategory.tsx create mode 100644 src/components/Components/VoteFormContent/VoteFormDate.tsx create mode 100644 src/components/Components/VoteFormContent/VoteFormDescription.tsx create mode 100644 src/components/Components/VoteFormContent/VoteFormSubmit.tsx create mode 100644 src/components/Components/VoteFormContent/VoteFormTitle.tsx create mode 100644 src/components/Components/VoteFormContent/VoteFormUpload.tsx create mode 100644 src/components/Modules/VoteForm/VoteFormContentModule.tsx create mode 100644 src/components/Modules/VoteForm/VoteFormHeaderModule.tsx create mode 100644 src/components/Templates/VoteForm/VoteFormTemplate.tsx diff --git a/public/svgs/index.ts b/public/svgs/index.ts index 5db7d71..1aca4a9 100644 --- a/public/svgs/index.ts +++ b/public/svgs/index.ts @@ -10,6 +10,6 @@ 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 nvr } from "./nvr.svg"; +export { default as camera } from "./camera.svg"; export { default as eth } from "./eth.svg"; -export { default as node } from "./node.svg"; +export { default as nvr } from "./nvr.svg"; diff --git a/public/svgs/nvr.svg b/public/svgs/nvr.svg index de25b49..d0f92ac 100644 --- a/public/svgs/nvr.svg +++ b/public/svgs/nvr.svg @@ -1,20 +1,20 @@ - - + + - + - - + + - - + + - + 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 index 7f80418..2fe4286 100644 --- a/src/components/Atoms/FormHeaderAtom/FormHeaderAtom.tsx +++ b/src/components/Atoms/FormHeaderAtom/FormHeaderAtom.tsx @@ -1,8 +1,8 @@ import React from "react"; -interface Props { +type Props = { title: string; -} +}; const FormHeaderAtom = (props: Props) => { return ( diff --git a/src/components/Atoms/HeaderAtom/HeaderAtom.tsx b/src/components/Atoms/HeaderAtom/HeaderAtom.tsx index 7c82856..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 = { 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 index 17ad40a..60f7a27 100644 --- a/src/components/Atoms/UserAvatarAtom/UserAvaterAtom.tsx +++ b/src/components/Atoms/UserAvatarAtom/UserAvaterAtom.tsx @@ -1,5 +1,5 @@ import React from "react"; -import Image from "next/image"; + type Props = { size?: number; 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/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 ( + +