Nnebuo Ukamaka_TestPage2

pages/_app.js

@@ -0,0 +1,7 @@
+import '../src/styles/globals.css';
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />;
+}
+
+export default MyApp;

pages/settingsPage.tsx

@@ -0,0 +1,6 @@
+import SettingsContainer from "../src/app/NnebuoUkamaka/settingsPage/container/settingsContainer";
+const Settings = () => {
+    return <SettingsContainer/>
+};
+
+export default Settings;

src/app/NnebuoUkamaka/footer/FooterContainer.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import Link from "next/link";
+import Image from "next/image";
+
+const Footer = () => {
+  return (
+    <footer className='fixed bottom-0 w-full bg-gray-800 py-4'>
+      <nav className='mx-auto flex max-w-sm justify-around'>
+        <a href=''>
+          <div className='flex cursor-pointer flex-col items-center'>
+            <Image
+              src='/svgs/paymentIcon.svg'
+              alt='payment'
+              width={20}
+              height={20}
+              className='rounded-full'
+            />
+          </div>
+        </a>
+
+        <a href=''>
+          <div className='flex cursor-pointer flex-col items-center'>
+            <Image
+              src='/svgs/messageIcon.svg'
+              alt='payment'
+              width={20}
+              height={20}
+              className='rounded-full'
+            />
+          </div>
+        </a>
+        <div className='flex cursor-pointer flex-col items-center'>
+          <span className=' h-1 w-16 bg-green-500' />
+          <a href=''>
+            <div className='flex cursor-pointer flex-col items-center'>
+              <Image
+                src='/svgs/cardIcon.svg'
+                alt='star'
+                width={20}
+                height={20}
+                className='rounded-full'
+              />
+            </div>
+          </a>
+        </div>
+        <a href=''>
+          <div className='flex cursor-pointer flex-col items-center'>
+            <Image
+              src='/svgs/reloadIcon.svg'
+              alt='star'
+              width={20}
+              height={20}
+              className='rounded-full'
+            />
+          </div>
+        </a>
+      </nav>
+    </footer>
+  );
+};
+
+export default Footer;

src/app/NnebuoUkamaka/header/headerContainer.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import Image from "next/image";
+const Header = () => {
+  return (
+    <header className='flex items-center justify-between bg-gray-900 px-4 py-3'>
+      <div className='flex items-center'>
+        <a className='text-white' href=''>
+          <Image
+            src='/svgs/headerIcon.svg'
+            alt='copy'
+            width={20}
+            height={20}
+            className='rounded-full'
+          />
+        </a>
+      </div>
+      <div className='flex-1 text-center'>
+        <h1 className='text-lg font-semibold text-white'>Proxima OS</h1>
+      </div>
+      <div className='flex items-center'>
+        <a className='text-white' href=''>
+          <Image
+            src='/svgs/settingsIcon.svg'
+            alt='star'
+            width={20}
+            height={20}
+            className='rounded-full'
+          />
+        </a>
+      </div>
+    </header>
+  );
+};
+
+export default Header;

src/app/NnebuoUkamaka/settingsPage/container/settingsContainer.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { NextPage } from "next";
+import Image from "next/image";
+import Header from "../../header/headerContainer";
+import Footer from "../../footer/FooterContainer";
+const SettingsContainer: NextPage = () => {
+  return (
+    <div>
+      <Header />
+      <div className=' min-h-screen  bg-gray-900 text-white'>
+        <div className='pl-6'>
+          <h1 className='mb-6 text-2xl font-semibold '>Messages</h1>
+          <div className='w-80 rounded-xl'>
+            <div className=' mb-1 h-10 w-10 justify-center'>
+              <Image
+                src='/images/starIcon.png'
+                alt='star'
+                width={100}
+                height={100}
+                className='rounded-full'
+              />
+            </div>
+            <div className='mb-4'>
+              <span className='text-lg font-semibold'>Proxima</span>
+            </div>
+            <div className='flex h-80 w-80 flex-col items-center justify-center rounded-2xl bg-gray-800 p-6 text-center shadow-lg shadow-gray-800'>
+              <h1 className='mb-4 w-56 text-2xl font-semibold text-white'>
+                Transaction processing
+              </h1>
+              <div className='mb-6 flex h-56 w-full justify-center'>
+                <Image
+                  src='/svgs/blocks.svg'
+                  alt='Processing Cube'
+                  width={100}
+                  height={100}
+                />
+              </div>
+
+              <p>Uploading your transaction to the node.</p>
+              <p> please wait for a moment...</p>
+
+              <p>This may take up to 2 minutes.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
+};
+
+export default SettingsContainer;