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..5db7d71 100644 --- a/public/svgs/index.ts +++ b/public/svgs/index.ts @@ -3,3 +3,13 @@ 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 nvr } from "./nvr.svg"; +export { default as eth } from "./eth.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..de25b49 --- /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..7d66b2c --- /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", + }, + { + exchange: "Nvir", + message: "User: namulabs is fantasic company...", + user: "N", + timeStamp: "08:42", + src: "nvr", + }, + ], + 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/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..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..9b37dfa --- /dev/null +++ b/src/components/Atoms/LogoAtom/LogoAtom.tsx @@ -0,0 +1,22 @@ +import React from "react"; +import SVGAtom from "../SVGAtom/SVGAtom"; + +type Props = { + 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..1128da9 --- /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/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..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..4541f52 --- /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..a01f82b --- /dev/null +++ b/src/components/Modules/Home/HomeWithModalContentModule.tsx @@ -0,0 +1,15 @@ +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"; + +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..201c24d --- /dev/null +++ b/src/components/Modules/Home/HomeWithModalFooterModule.tsx @@ -0,0 +1,10 @@ +import FooterAtom from "~/components/Atoms/HomeFooterAtom/HomeFooterAtom"; +import type { navs } from "~/interfaces"; + +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/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; +} 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 */