diff --git a/public/pngs/eth.png b/public/pngs/eth.png new file mode 100644 index 0000000..cc6cad1 Binary files /dev/null and b/public/pngs/eth.png differ diff --git a/public/pngs/nvir.png b/public/pngs/nvir.png new file mode 100644 index 0000000..bb86632 Binary files /dev/null and b/public/pngs/nvir.png differ diff --git a/public/svgs/badge.svg b/public/svgs/badge.svg new file mode 100644 index 0000000..832a660 --- /dev/null +++ b/public/svgs/badge.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/svgs/cubes.svg b/public/svgs/cubes.svg new file mode 100644 index 0000000..3512553 --- /dev/null +++ b/public/svgs/cubes.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/svgs/dollar.svg b/public/svgs/dollar.svg new file mode 100644 index 0000000..1f37f84 --- /dev/null +++ b/public/svgs/dollar.svg @@ -0,0 +1,3 @@ + + + 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..413945a 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 vote } from "./vote.svg"; +export { default as logo } from "./logo.svg"; +export { default as dollar } from "./dollar.svg"; +export { default as message } from "./message.svg"; +export { default as wallet } from "./wallet.svg"; +export { default as history } from "./history.svg"; +export { default as cubes } from "./cubes.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/vote.svg b/public/svgs/vote.svg new file mode 100644 index 0000000..627b637 --- /dev/null +++ b/public/svgs/vote.svg @@ -0,0 +1,4 @@ + + + + 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/israel/testPage1/IsraelPageWithModal/container/IsraelPageWithModal.tsx b/src/app/israel/testPage1/IsraelPageWithModal/container/IsraelPageWithModal.tsx new file mode 100644 index 0000000..9480f14 --- /dev/null +++ b/src/app/israel/testPage1/IsraelPageWithModal/container/IsraelPageWithModal.tsx @@ -0,0 +1,37 @@ +import { useRouter } from "next/navigation"; +import { useState } from "react"; +import { PageWithModalTemplate } from "~/components/Templates/PageWithModal/PageWithModalTemplate"; +import ModalStore from "~/store/ModalStore"; + +export const PageWithModalContainer = () => { + const router = useRouter(); + const [isCustomModalOpen, setIsCustomModalOpen] = useState(false); + + const pagewithmodalTemplateProps: React.ComponentProps< + typeof PageWithModalTemplate + > = { + pageWithModalHeaderModuleProps: { + title: "PageWithModalHeaderModule", + onClickLeftIcon: () => router.back(), + }, + pageWithModalContentModuleProps: { + onOpenSnapshotModal: () => + ModalStore.open("TitleAndContent", { + TitleAndContent: { + title: "Modal Title", + description: "Modal Content", + }, + }), + modalProps: { + modalProps: { + isModalOpen: isCustomModalOpen, + setModalOpen: setIsCustomModalOpen, + }, + title: "Custom Modal Title", + description: "Custom Modal Description", + }, + }, + }; + + return ; +}; diff --git a/src/app/israel/testPage1/IsraelPageWithModal/page.tsx b/src/app/israel/testPage1/IsraelPageWithModal/page.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/app/israel/testPage1/home/container/IsraelHomeContainer.tsx b/src/app/israel/testPage1/home/container/IsraelHomeContainer.tsx new file mode 100644 index 0000000..d3fa1fe --- /dev/null +++ b/src/app/israel/testPage1/home/container/IsraelHomeContainer.tsx @@ -0,0 +1,54 @@ +import React, { useState } from "react"; +import { message } from "antd"; +import { useRouter } from "next/navigation"; +import { IsraelHomeTemplate } from "~/components/Templates/Home/IsraelHomeTemplate"; +import * as svgs from "public/svgs"; +import { Messages } from "~/components/Tabs/Messages"; +import { Transactions } from "~/components/Tabs/Transactions"; +import { Wallet } from "~/components/Tabs/Wallet"; +import { History } from "~/components/Tabs/History"; +import { getFooterTabs } from "~/components/Modules/IsraelHome/tabs"; + +export const IsraelHomeContainer = () => { + const [showCustomModal, setShowCustomModal] = useState(false); + const [activeTabId, setActiveTabId] = useState("dollar"); + const router = useRouter(); + + const headerLeftIconClicked = () => { + void router.push("israel/vote"); + }; + + const headerRightIconClicked = () => { + void message.info("can't go Settings"); + }; + + const footerTabs = getFooterTabs(setShowCustomModal); + + const homeTemplateProps: React.ComponentProps = { + homeHeaderModuleProps: { + headerProps: { + title: "Proxima OS", + onClickLeftIcon: headerLeftIconClicked, + onClickRightIcon: headerRightIconClicked, + }, + }, + homeContentModuleProps: { + onClick: setShowCustomModal, + tabs: footerTabs, + activeTabId, + setActiveTabId, + // defaultActiveTab: defaultActiveTab, + }, + homeFooterModuleProps: { + tabs: footerTabs, + activeTabId, + setActiveTabId, + }, + transactionModalProps: { + isModalOpen: showCustomModal, + setModalOpen: setShowCustomModal, + }, + }; + + return ; +}; diff --git a/src/app/israel/testPage1/home/page.tsx b/src/app/israel/testPage1/home/page.tsx new file mode 100644 index 0000000..1116e87 --- /dev/null +++ b/src/app/israel/testPage1/home/page.tsx @@ -0,0 +1,8 @@ +"use client"; +import { IsraelHomeContainer } from "./container/IsraelHomeContainer"; + +const Home = () => { + return ; +}; + +export default Home; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 3a8a114..6d9bd32 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -15,12 +15,12 @@ export default function RootLayout({ children: React.ReactNode; }) { return ( - - -
+ + +
{children} -
-
+
+
diff --git a/src/app/sample/empty/container/EmptyContainer.tsx b/src/app/sample/empty/container/EmptyContainer.tsx index 53ee966..ba612be 100644 --- a/src/app/sample/empty/container/EmptyContainer.tsx +++ b/src/app/sample/empty/container/EmptyContainer.tsx @@ -1,6 +1,7 @@ "use client"; import { useRouter } from "next/navigation"; import { EmptyTemplate } from "~/components/Templates/Empty/EmptyTemplate"; +import React from "react"; export const EmptyContainer = () => { const router = useRouter(); diff --git a/src/components/Atoms/IsraelFooterAtom/IsraelFooterAtom.tsx b/src/components/Atoms/IsraelFooterAtom/IsraelFooterAtom.tsx new file mode 100644 index 0000000..6b7f2dd --- /dev/null +++ b/src/components/Atoms/IsraelFooterAtom/IsraelFooterAtom.tsx @@ -0,0 +1,65 @@ +import React, { useState } from "react"; +import SVGAtom from "../SVGAtom/SVGAtom"; +import * as svgs from "public/svgs"; + +type Props = { + title: string; +}; + +type TabItemProps = { + iconName: keyof typeof svgs; + isActive: boolean; + onClick: () => void; +}; + +const TabItem = (props: TabItemProps) => { + const { iconName, isActive, onClick } = props; + + return ( +
+ +
+ ); +}; + +export type Tab = { + id: string; + iconName: keyof typeof svgs; + content: React.ReactNode; +}; + +type TabProps = { + tabs: Tab[]; + activeTabId: string; + setActiveTabId: React.Dispatch>; +}; + +export const IsraelFooterAtom = (props: TabProps) => { + const { tabs, activeTabId, setActiveTabId } = props; + + return ( +
+
+ {tabs.map((tab) => ( + setActiveTabId(tab.id)} + /> + ))} +
+
+ ); +}; diff --git a/src/components/Atoms/IsraelHeaderAtom/IsraelHeaderAtom.tsx b/src/components/Atoms/IsraelHeaderAtom/IsraelHeaderAtom.tsx new file mode 100644 index 0000000..d7bd7ce --- /dev/null +++ b/src/components/Atoms/IsraelHeaderAtom/IsraelHeaderAtom.tsx @@ -0,0 +1,34 @@ +import { SettingOutlined } from "@ant-design/icons"; +import SVGAtom from "../SVGAtom/SVGAtom"; + +type Props = { + title: string; + onClickLeftIcon?: () => void; + onClickRightIcon?: () => void; +}; + +export const IsraelHeaderAtom = (props: Props) => { + return ( +
+ {props.onClickLeftIcon && ( +
+ +
+ )} + +
{props.title}
+ + {props.onClickRightIcon && ( +
console.log("Antd icon clicked")} + > + +
+ )} +
+ ); +}; diff --git a/src/components/Atoms/IsraelModalContainer/IsraelModalContainer.tsx b/src/components/Atoms/IsraelModalContainer/IsraelModalContainer.tsx new file mode 100644 index 0000000..52879cd --- /dev/null +++ b/src/components/Atoms/IsraelModalContainer/IsraelModalContainer.tsx @@ -0,0 +1,21 @@ +import cn from "classnames"; +import { type PropsWithChildren } from "react"; + +type Props = { + style?: React.CSSProperties; + className?: string; +}; + +export const IsraelModalContainer = (props: PropsWithChildren) => { + return ( +
+ {props.children} +
+ ); +}; \ No newline at end of file diff --git a/src/components/Components/MessageList/MessageList.tsx b/src/components/Components/MessageList/MessageList.tsx new file mode 100644 index 0000000..27f0311 --- /dev/null +++ b/src/components/Components/MessageList/MessageList.tsx @@ -0,0 +1,56 @@ +import Image from "next/image"; +import { StaticImageData } from "next/image"; +// import * as svgs from "public/svgs"; + +export type MessageProps = { + id: string; + image: StaticImageData; + title: string; + content: string; + timestamp: string; + isViewed: boolean; +}; + +type Props = { + messages: MessageProps[]; +}; + +export const MessageList = (props: Props) => { + return ( +
    + {props.messages.map((message) => ( +
  • +
    +
    + {message.title} +
    +

    + {message.title} +

    +

    + {message.content} +

    +
    +
    +
    +

    + {message.timestamp} +

    + {message.isViewed && ( +
    +

    N

    +
    + )} +
    +
    +
    • + ))} +
+ ); +}; diff --git a/src/components/Components/TransactionModal.tsx b/src/components/Components/TransactionModal.tsx new file mode 100644 index 0000000..cdbc0e3 --- /dev/null +++ b/src/components/Components/TransactionModal.tsx @@ -0,0 +1,84 @@ +import Paragraph from "antd/es/typography/Paragraph"; +import Title from "antd/es/typography/Title"; +import { + memo, + type PropsWithChildren, + useCallback, + useEffect, + useState, +} from "react"; +import ReactDOM from "react-dom"; +import { IsraelModalContainer } from "~/components/Atoms/IsraelModalContainer/IsraelModalContainer"; +import SVGAtom from "~/components/Atoms/SVGAtom/SVGAtom"; + +type Props = { + isModalOpen: boolean; + setModalOpen: (value: boolean) => void; + containerClassName?: string; +}; + +const TransactionModal = (props: PropsWithChildren) => { + const [modalContainer, setModalContainer] = useState( + null + ); + + useEffect(() => { + const container = document.createElement("div"); + const modalRoot = document.getElementById("custom-modal"); + if (modalRoot) { + modalRoot?.appendChild(container); + setModalContainer(container); + } + + return () => { + if (modalRoot) { + modalRoot?.removeChild(container); + } + }; + }, []); + + const onClose = useCallback(() => { + if (props.isModalOpen) { + props.setModalOpen(false); + } + }, [props.isModalOpen]); + + return ( + modalContainer && + ReactDOM.createPortal( + <> + {props.isModalOpen ? ( +
+
+ + + Transaction processing + + + + Uploading your transaction to the node. please wait for a + moment...
+ This may take up to 2 minutes. + + +
+ ) : null} + , + modalContainer + ) + ); +}; + +export default memo(TransactionModal); diff --git a/src/components/Modules/Home/HomeContentModule.tsx b/src/components/Modules/Home/HomeContentModule.tsx index c6e8de5..aa6899e 100644 --- a/src/components/Modules/Home/HomeContentModule.tsx +++ b/src/components/Modules/Home/HomeContentModule.tsx @@ -6,7 +6,7 @@ type Props = { export const HomeContentModule = (props: Props) => { return ( -
+
); diff --git a/src/components/Modules/IsraelHome/IsraelHomeContentModule.tsx b/src/components/Modules/IsraelHome/IsraelHomeContentModule.tsx new file mode 100644 index 0000000..32be2c7 --- /dev/null +++ b/src/components/Modules/IsraelHome/IsraelHomeContentModule.tsx @@ -0,0 +1,34 @@ +import SVGAtom from "../../Atoms/SVGAtom/SVGAtom"; +import { MessageList } from "~/components/Components/MessageList/MessageList"; +import * as svgs from "public/svgs"; +import eth from "./../../../../public/pngs/eth.png"; +import nvir from "./../../../../public/pngs/nvir.png"; +import { Messages } from "~/components/Tabs/Messages"; +import { Tab } from "~/components/Atoms/IsraelFooterAtom/IsraelFooterAtom"; + +// type Message = { +// id: string; +// image?: keyof typeof svgs; +// title: string; +// content: string; +// timestamp: string; +// }; + +// type Props = { +// messages: Message[]; +// }; + +type Props = { + onClick: (isTrue: boolean) => void; + tabs: Tab[]; + activeTabId: string; + setActiveTabId: React.Dispatch>; +}; + +export const IsraelHomeContentModule = (props: Props) => { + const { tabs, activeTabId } = props; + + const activeTabContent = tabs.find((tab) => tab.id === activeTabId)?.content; + + return <>{activeTabContent}; +}; diff --git a/src/components/Modules/IsraelHome/IsraelHomeFooterModule.tsx b/src/components/Modules/IsraelHome/IsraelHomeFooterModule.tsx new file mode 100644 index 0000000..01c117b --- /dev/null +++ b/src/components/Modules/IsraelHome/IsraelHomeFooterModule.tsx @@ -0,0 +1,26 @@ +import { IsraelFooterAtom } from "~/components/Atoms/IsraelFooterAtom/IsraelFooterAtom"; +import * as svgs from "public/svgs"; + +type Tab = { + id: string; + iconName: keyof typeof svgs; + content: React.ReactNode; +}; + +type Props = { + tabs: Tab[]; + activeTabId: string; + setActiveTabId: any; +}; + +export const IsraelHomeFooterModule = (props: Props) => { + const { tabs, activeTabId, setActiveTabId } = props; + + return ( + + ); +}; diff --git a/src/components/Modules/IsraelHome/IsraelHomeHeaderModule.tsx b/src/components/Modules/IsraelHome/IsraelHomeHeaderModule.tsx new file mode 100644 index 0000000..a7a1afa --- /dev/null +++ b/src/components/Modules/IsraelHome/IsraelHomeHeaderModule.tsx @@ -0,0 +1,9 @@ +import { IsraelHeaderAtom } from "~/components/Atoms/IsraelHeaderAtom/IsraelHeaderAtom"; + +type Props = { + headerProps: React.ComponentProps; +}; + +export const IsraelHomeHeaderModule = (props: Props) => { + return ; +}; diff --git a/src/components/Modules/IsraelHome/list.ts b/src/components/Modules/IsraelHome/list.ts new file mode 100644 index 0000000..3c974a0 --- /dev/null +++ b/src/components/Modules/IsraelHome/list.ts @@ -0,0 +1,22 @@ +import eth from "../../../../public/pngs/eth.png"; +import nvir from "../../../../public/pngs/nvir.png"; +import { MessageProps } from "~/components/Components/MessageList/MessageList"; + +export const messages: MessageProps[] = [ + { + id: "1", + image: eth, + title: "ETH", + content: "User: namulabs is fantasic company...", + timestamp: "08:43 PM", + isViewed: true, + }, + { + id: "2", + image: nvir, + title: "Nvir", + content: "User: namulabs is fantasic company...", + timestamp: "08:42 AM", + isViewed: false, + }, +]; diff --git a/src/components/Modules/IsraelHome/tabs.tsx b/src/components/Modules/IsraelHome/tabs.tsx new file mode 100644 index 0000000..1b27a92 --- /dev/null +++ b/src/components/Modules/IsraelHome/tabs.tsx @@ -0,0 +1,28 @@ +import { Transactions } from "~/components/Tabs/Transactions"; +import { Messages } from "~/components/Tabs/Messages"; +import { Wallet } from "~/components/Tabs/Wallet"; +import { History } from "~/components/Tabs/History"; +import * as svgs from "public/svgs"; + +export const getFooterTabs = (setShowCustomModal: (value: boolean) => void) => [ + { + id: "dollar", + iconName: "dollar" as keyof typeof svgs, + content: , + }, + { + id: "message", + iconName: "message" as keyof typeof svgs, + content: , + }, + { + id: "wallet", + iconName: "wallet" as keyof typeof svgs, + content: , + }, + { + id: "history", + iconName: "history" as keyof typeof svgs, + content: , + }, +]; diff --git a/src/components/Tabs/History.tsx b/src/components/Tabs/History.tsx new file mode 100644 index 0000000..4ad1ecd --- /dev/null +++ b/src/components/Tabs/History.tsx @@ -0,0 +1,24 @@ +import React from "react"; +import SVGAtom from "../Atoms/SVGAtom/SVGAtom"; + +type Props = { + setShowCustomModal: (value: boolean) => void; +}; + +export const History = (props: Props) => { + const { setShowCustomModal } = props; + + return ( +
+
+

+ History +

+ +
+
+ ); +}; diff --git a/src/components/Tabs/Messages.tsx b/src/components/Tabs/Messages.tsx new file mode 100644 index 0000000..e10ca5e --- /dev/null +++ b/src/components/Tabs/Messages.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import SVGAtom from "../Atoms/SVGAtom/SVGAtom"; +import { MessageList } from "../Components/MessageList/MessageList"; +import { messages } from "../Modules/IsraelHome/list"; + +type Props = { + setShowCustomModal: (value: boolean) => void; +}; + +export const Messages = (props: Props) => { + const { setShowCustomModal } = props; + + return ( +
+
+

+ Messages +

+ +
+
+ +
+
+ ); +}; diff --git a/src/components/Tabs/Transactions.tsx b/src/components/Tabs/Transactions.tsx new file mode 100644 index 0000000..258900d --- /dev/null +++ b/src/components/Tabs/Transactions.tsx @@ -0,0 +1,24 @@ +import React from "react"; +import SVGAtom from "../Atoms/SVGAtom/SVGAtom"; + +type Props = { + setShowCustomModal: (value: boolean) => void; +}; + +export const Transactions = (props: Props) => { + const { setShowCustomModal } = props; + + return ( +
+
+

+ Transactions +

+ +
+
+ ); +}; diff --git a/src/components/Tabs/Wallet.tsx b/src/components/Tabs/Wallet.tsx new file mode 100644 index 0000000..0cecb7d --- /dev/null +++ b/src/components/Tabs/Wallet.tsx @@ -0,0 +1,24 @@ +import React from "react"; +import SVGAtom from "../Atoms/SVGAtom/SVGAtom"; + +type Props = { + setShowCustomModal: (value: boolean) => void; +}; + +export const Wallet = (props: Props) => { + const { setShowCustomModal } = props; + + return ( +
+
+

+ Wallet +

+ +
+
+ ); +}; diff --git a/src/components/Templates/Home/IsraelHomeTemplate.tsx b/src/components/Templates/Home/IsraelHomeTemplate.tsx new file mode 100644 index 0000000..435625d --- /dev/null +++ b/src/components/Templates/Home/IsraelHomeTemplate.tsx @@ -0,0 +1,34 @@ +import { IsraelHomeHeaderModule } from "~/components/Modules/IsraelHome/IsraelHomeHeaderModule"; +import { IsraelHomeContentModule } from "~/components/Modules/IsraelHome/IsraelHomeContentModule"; +import { IsraelHomeFooterModule } from "~/components/Modules/IsraelHome/IsraelHomeFooterModule"; +import { Layout } from "antd"; +import { Content, Footer, Header } from "antd/es/layout/layout"; +import TransactionModal from "~/components/Components/TransactionModal"; + +type Props = { + homeHeaderModuleProps: React.ComponentProps; + homeContentModuleProps: React.ComponentProps; + homeFooterModuleProps: React.ComponentProps; + transactionModalProps: React.ComponentProps; +}; + +export const IsraelHomeTemplate = (props: Props) => { + return ( + +
+ +
+ + + + + + + + + ); +}; diff --git a/tsconfig.json b/tsconfig.json index 6123c11..b262241 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,21 +8,22 @@ "resolveJsonModule": true, "moduleDetection": "force", "isolatedModules": true, - /* Strictness */ "strict": true, "noUncheckedIndexedAccess": true, "checkJs": true, - /* Bundled projects */ "lib": ["dom", "dom.iterable", "ES2022"], "noEmit": true, "module": "ESNext", "moduleResolution": "Bundler", "jsx": "preserve", - "plugins": [{ "name": "next" }], + "plugins": [ + { + "name": "next" + } + ], "incremental": true, - /* Path Aliases */ "baseUrl": ".", "paths": { @@ -37,7 +38,8 @@ "**/*.cjs", "**/*.js", ".next/types/**/*.ts", - "autogen.ts" + "autogen.ts", + "src/components/Atoms/IsraelFooterAtom" ], "exclude": ["node_modules", "public"] }