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/camera.svg b/public/svgs/camera.svg new file mode 100644 index 0000000..b35e8ae --- /dev/null +++ b/public/svgs/camera.svg @@ -0,0 +1,3 @@ + + + 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..a66135d 100644 --- a/public/svgs/index.ts +++ b/public/svgs/index.ts @@ -3,3 +3,11 @@ 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"; +export { default as camera } from "./camera.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/home/container/IsraelHomeContainer.tsx b/src/app/israel/testPage1/home/container/IsraelHomeContainer.tsx new file mode 100644 index 0000000..aa99929 --- /dev/null +++ b/src/app/israel/testPage1/home/container/IsraelHomeContainer.tsx @@ -0,0 +1,51 @@ +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 { 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/testPage2/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, + backgroundColor: "#1F1F1F", + textColor: "#ffff", + }, + }, + homeContentModuleProps: { + onClick: setShowCustomModal, + tabs: footerTabs, + activeTabId, + setActiveTabId, + }, + 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/israel/testPage2/vote/container/IsraelVoteContainer.tsx b/src/app/israel/testPage2/vote/container/IsraelVoteContainer.tsx new file mode 100644 index 0000000..e159294 --- /dev/null +++ b/src/app/israel/testPage2/vote/container/IsraelVoteContainer.tsx @@ -0,0 +1,23 @@ +import { useRouter } from "next/navigation"; +import { useState } from "react"; +import { IsraelPageWithFormTemplate } from "~/components/Templates/PageWithForm/IsraelPageWithFormTemplate"; + +export const IsraelVoteContainer = () => { + const router = useRouter(); + const [formData, setFormData] = useState({}); + + const pagewithformTemplateProps: React.ComponentProps< + typeof IsraelPageWithFormTemplate + > = { + pageWithFormHeaderModuleProps: { + title: "Vote", + backgroundColor: "#FFFFFF", + textColor: "#000000D9", + }, + pageWithFormFormModuleProps: { + setFormData, + }, + }; + + return ; +}; diff --git a/src/app/israel/testPage2/vote/page.tsx b/src/app/israel/testPage2/vote/page.tsx new file mode 100644 index 0000000..b0fce27 --- /dev/null +++ b/src/app/israel/testPage2/vote/page.tsx @@ -0,0 +1,8 @@ +"use client"; +import { IsraelVoteContainer } from "./container/IsraelVoteContainer"; + +const Vote = () => { + return ; +}; + +export default Vote; 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..7db5c6c --- /dev/null +++ b/src/components/Atoms/IsraelHeaderAtom/IsraelHeaderAtom.tsx @@ -0,0 +1,49 @@ +import { SettingOutlined } from "@ant-design/icons"; +import SVGAtom from "../SVGAtom/SVGAtom"; + +type Props = { + title: string; + backgroundColor?: string; + textColor?: string; + onClickLeftIcon?: () => void; + onClickRightIcon?: () => void; +}; + +export const IsraelHeaderAtom = (props: Props) => { + const { + title, + backgroundColor, + textColor, + onClickLeftIcon, + onClickRightIcon, + } = props; + + return ( +
+ {onClickLeftIcon && ( +
+ +
+ )} + +
+ {title} +
+ + {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/Modules/PageWithForm/IsraelPageWithFormHeaderModule.tsx b/src/components/Modules/PageWithForm/IsraelPageWithFormHeaderModule.tsx new file mode 100644 index 0000000..5d6aeee --- /dev/null +++ b/src/components/Modules/PageWithForm/IsraelPageWithFormHeaderModule.tsx @@ -0,0 +1,20 @@ +import { IsraelHeaderAtom } from "~/components/Atoms/IsraelHeaderAtom/IsraelHeaderAtom"; + +type Props = { + title: string; + onClickLeftIcon?: () => void; + backgroundColor?: string; + textColor?: string; +}; + +export const IsraelPageWithFormHeaderModule = (props: Props) => { + const { title, backgroundColor, textColor } = props; + + return ( + + ); +}; diff --git a/src/components/Modules/PageWithForm/VoteFormModule.tsx b/src/components/Modules/PageWithForm/VoteFormModule.tsx new file mode 100644 index 0000000..d7269d4 --- /dev/null +++ b/src/components/Modules/PageWithForm/VoteFormModule.tsx @@ -0,0 +1,134 @@ +import { Upload, Form, DatePicker, Button, Input, message } from "antd"; +const { RangePicker } = DatePicker; +const { TextArea } = Input; +import * as svgs from "public/svgs"; +import SVGAtom from "~/components/Atoms/SVGAtom/SVGAtom"; +import { CameraFilled } from "@ant-design/icons"; + +type Props = { + setFormData: (data: any) => void; +}; + +const labelStyle = { + fontSize: "16.48px", + fontWeight: 500, + lineHeight: "19.95px", +}; + +const voteInputStyle = { + height: "55px", + width: "360px", +}; + +export const VoteFormModule = (props: Props) => { + const [form] = Form.useForm(); + + const onFinish = (values: any) => { + void message.info(JSON.stringify(values)); + }; + + const uploadButton = ( +
+ +
+ ); + + return ( +
{ + props.setFormData((prevData: any) => + changedFields.reduce( + (acc, { name, value }) => ({ ...acc, [name[0]]: value }), + prevData + ) + ); + }} + layout='vertical' + style={{ maxWidth: 600, margin: "0 auto" }} + onFinish={onFinish} + className='bg-white' + > +
+ + + + + + + + +
+ {uploadButton} +
+ + + +