namu-labs-dev · Arkorede · Sep 22, 2024 · Sep 23, 2024 · Sep 24, 2024 · Sep 26, 2024
diff --git a/public/pngs/eth.png b/public/pngs/eth.png
diff --git a/public/pngs/nvir.png b/public/pngs/nvir.png
diff --git a/public/svgs/badge.svg b/public/svgs/badge.svg
diff --git a/public/svgs/camera.svg b/public/svgs/camera.svg
diff --git a/public/svgs/cubes.svg b/public/svgs/cubes.svg
diff --git a/public/svgs/dollar.svg b/public/svgs/dollar.svg
diff --git a/public/svgs/history.svg b/public/svgs/history.svg
diff --git 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
diff --git a/public/svgs/message.svg b/public/svgs/message.svg
diff --git a/public/svgs/vote.svg b/public/svgs/vote.svg
diff --git a/public/svgs/wallet.svg b/public/svgs/wallet.svg
diff --git a/src/app/israel/testPage1/home/container/IsraelHomeContainer.tsx 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<boolean>(false);
+  const [activeTabId, setActiveTabId] = useState<string>("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<typeof IsraelHomeTemplate> = {
+    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 <IsraelHomeTemplate {...homeTemplateProps} />;
+};
diff --git a/src/app/israel/testPage1/home/page.tsx b/src/app/israel/testPage1/home/page.tsx
@@ -0,0 +1,8 @@
+"use client";
+import { IsraelHomeContainer } from "./container/IsraelHomeContainer";
+
+const Home = () => {
+  return <IsraelHomeContainer />;
+};
+
+export default Home;
diff --git a/src/app/israel/testPage2/vote/container/IsraelVoteContainer.tsx 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<any>({});
+
+  const pagewithformTemplateProps: React.ComponentProps<
+    typeof IsraelPageWithFormTemplate
+  > = {
+    pageWithFormHeaderModuleProps: {
+      title: "Vote",
+      backgroundColor: "#FFFFFF",
+      textColor: "#000000D9",
+    },
+    pageWithFormFormModuleProps: {
+      setFormData,
+    },
+  };
+
+  return <IsraelPageWithFormTemplate {...pagewithformTemplateProps} />;
+};
diff --git a/src/app/israel/testPage2/vote/page.tsx b/src/app/israel/testPage2/vote/page.tsx
@@ -0,0 +1,8 @@
+"use client";
+import { IsraelVoteContainer } from "./container/IsraelVoteContainer";
+
+const Vote = () => {
+  return <IsraelVoteContainer />;
+};
+
+export default Vote;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -15,12 +15,12 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" className={`${GeistSans.variable}`}>
-      <body className="bg-[#efefef]">
-        <div className="m-auto h-screen max-w-[500px] overflow-auto bg-white">
+    <html lang='en' className={`${GeistSans.variable}`}>
+      <body className='bg-[#efefef]'>
+        <div className='m-auto h-screen max-w-[500px] overflow-auto bg-white'>
           <GlobalLayout>{children}</GlobalLayout>
-          <div id="custom-drawer" />
-          <div id="custom-modal" />
+          <div id='custom-drawer' />
+          <div id='custom-modal' />
         </div>
       </body>
     </html>

diff --git 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
@@ -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 (
+    <div
+      onClick={onClick}
+      className={`flex cursor-pointer flex-col items-center justify-center p-2 transition-all duration-200 ${
+        isActive
+          ? "border-t-2 border-[#00EC97]"
+          : "border-t-2 border-transparent hover:bg-gray-700"
+      }`}
+    >
+      <SVGAtom
+        iconName={iconName}
+        className='h-6 w-6'
+        color={`${isActive ? "white" : ""}`}
+      />
+    </div>
+  );
+};
+
+export type Tab = {
+  id: string;
+  iconName: keyof typeof svgs;
+  content: React.ReactNode;
+};
+
+type TabProps = {
+  tabs: Tab[];
+  activeTabId: string;
+  setActiveTabId: React.Dispatch<React.SetStateAction<string>>;
+};
+
+export const IsraelFooterAtom = (props: TabProps) => {
+  const { tabs, activeTabId, setActiveTabId } = props;
+
+ return (
+    <div>
+      <div className='flex justify-around bg-[#262626] pb-2'>
+        {tabs.map((tab) => (
+          <TabItem
+            key={tab.id}
+            iconName={tab.iconName}
+            isActive={activeTabId === tab.id}
+            onClick={() => setActiveTabId(tab.id)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/Atoms/IsraelHeaderAtom/IsraelHeaderAtom.tsx 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 (
+    <div
+      className={`relative flex h-full w-full items-center justify-center`}
+      style={{ backgroundColor: backgroundColor }}
+    >
+      {onClickLeftIcon && (
+        <div
+          className='absolute left-0 z-[1] flex w-[50px] cursor-pointer items-center justify-center'
+          onClick={onClickLeftIcon}
+        >
+          <SVGAtom iconName='vote' width={20} height={20} color='white' />
+        </div>
+      )}
+
+      <div className='text-lg font-bold' style={{ color: textColor }}>
+        {title}
+      </div>
+
+      {onClickRightIcon && (
+        <div
+          className='absolute right-0 z-[1] flex w-[50px] cursor-pointer items-center justify-center'
+          onClick={() => console.log("Antd icon clicked")}
+        >
+          <SettingOutlined className='cursor-pointer text-[20px] !text-[#BFBFBF]' />
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/src/components/Atoms/IsraelModalContainer/IsraelModalContainer.tsx 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<Props>) => {
+  return (
+    <div
+      className={cn(
+        "relative left-1/2 top-1/2 z-[1] h-[398px] w-full max-w-[350px] translate-x-[-50%] translate-y-[-50%]  rounded-[14px] bg-[#2C2D30] shadow-lg ",
+        props.className,
+      )}
+      style={props.style}
+    >
+      {props.children}
+    </div>
+  );
+};
diff --git a/src/components/Components/MessageList/MessageList.tsx 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 (
+    <ul className='space-y-1'>
+      {props.messages.map((message) => (
+        <li key={message.id} className='p-3'>
+          <div className='flex items-start justify-between'>
+            <div className='flex items-center space-x-4'>
+              <Image
+                src={message.image}
+                width={44}
+                height={44}
+                alt={message.title}
+                className=''
+              />
+              <div>
+                <h3 className='font-bold leading-[26px] text-white'>
+                  {message.title}
+                </h3>
+                <p className='text-sm font-medium leading-[22px] text-[#BFBFBF] text-white'>
+                  {message.content}
+                </p>
+              </div>
+            </div>
+            <div className='flex flex-col items-end'>
+              <p className=' text-sm font-normal leading-[17px] text-white'>
+                {message.timestamp}
+              </p>
+              {message.isViewed && (
+                <div className='mt-1 flex h-5 w-5 items-center justify-center rounded-full bg-[#FF4D4F]'>
+                  <p className='text-xs font-normal text-white'>N</p>
+                </div>
+              )}
+            </div>
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+};