Merge pull request #21 from Xperienced-Tekie/wakilat-branch

Wakilat branch

client/app/globals.css

@@ -16,7 +16,7 @@
 }
 
 body {
-  color: rgb(var(--foreground-rgb));
+  /* color: rgb(var(--foreground-rgb)); */
 
 }
 

client/app/page.js

@@ -1,7 +1,76 @@
+'use client';
+
+import ChatListLightmode from '@/components/ChatListLightMode';
+import ChatListDarkmode from '@/components/ChatListDarkmode';
+import P2ChatSearchDarkmode from '@/components/P2ChatSearchDarkmode';
+// import P2ChatSearchLightmode from '@/components/P2ChatSearchDarkmode';
+import ChatSearchDarkmode from '@/components/ChatSearchDarkmode';
+import ChatSearchLightmode from '@/components/ChatSearchLightmode';
+import AIChatDarkmode from '@/components/AIChatDarkmode';
+import P2AIChatDarkmode from '@/components/P2AIChatDarkmode';
+import AIChatLightmode from '@/components/AIChatLightmode';
+import P2AIChatLightmode from '@/components/P2AIChatLightmode';
+import ChatDarkmode from '@/components/ChatDarkmode';
+import ChatLightmode from '@/components/ChatLightmode';
+import ChatImg from '@/components/ChatImg';
+import ChatVid from '@/components/ChatVid';
+
 export default function Home() {
   return (
     <div>
-      <h1>Hello world</h1>
+      <ChatSearchLightmode />
+
+      <div className="my-44"></div>
+
+      {/* <P2ChatSearchLightmode /> */}
+
+
+      <div className="my-44"></div>
+      <P2ChatSearchDarkmode />
+      <div className="my-44"></div>
+
+      <ChatSearchDarkmode />
+
+      <div className="my-44"></div>
+
+      <P2ChatSearchDarkmode />
+      <div className="my-44"></div>
+
+      <ChatDarkmode />
+      <div className="my-44"></div>
+
+      <ChatListLightmode />
+      <div className="my-44"></div>
+
+      <ChatListDarkmode />
+
+      <div className="my-44"></div>
+
+      <ChatLightmode />
+
+      <div className="my-44"></div>
+
+      <P2AIChatDarkmode />
+
+      <div className="my-44"></div>
+
+      <AIChatDarkmode />
+
+      <div className="my-44"></div>
+
+      <P2AIChatLightmode />
+
+      <div className="my-44"></div>
+
+      <AIChatLightmode />
+
+      <div className="my-44"></div>
+
+      <ChatImg />
+
+      <div className="my-44"></div>
+
+      <ChatVid />
     </div>
   );
 }

client/app/pages/[chat]/[chat]-DESKTOP-RMGC0G9.js

@@ -0,0 +1,69 @@
+export default {
+
+    "data" : 
+        [
+            {
+                "id": 1,
+                "image": "",
+                "name": "Tomiwa Philips",
+                "caption": "Please can you help me with some imp..."
+            },
+
+            {
+                "id": 2,
+                "image": "",
+                "name": "Dickson James",
+                "caption": "Please can you help me with some imp..."
+            },
+
+            {
+                "id": 3,
+                "image": "",
+                "name": "Fred Lam",
+                "caption": "Please can you help me with some imp..."
+            },
+
+            {
+                "id": 4,
+                "image": "",
+                "name": "Fgis Jammy",
+                "caption": "Please can you help me with some imp..."
+            },
+
+            {
+                "id": 5,
+                "image": "",
+                "name": "Jose Munroe",
+                "caption": "Please can you help me with some imp..."
+            },
+
+            {
+                "id": 6,
+                "image": "",
+                "name": "Martin Pearl",
+                "caption": "Please can you help me with some imp..."
+            },
+
+            {
+                "id": 7,
+                "image": "",
+                "name": "Freaking Drey",
+                "caption": "Please can you help me with some imp..."
+            },
+
+            {
+                "id": 8,
+                "image": "",
+                "name": "Pet Rose",
+                "caption": "Please can you help me with some imp..."
+            },
+
+            {
+                "id": 9,
+                "image": "",
+                "name": "Freaking Drey",
+                "caption": "Please can you help me with some imp..."
+            },
+        ]
+
+}

client/app/pages/data/data.json

@@ -0,0 +1,81 @@
+
+
+
+  {
+    "data" : 
+        [
+            {
+                "id": 1,
+                "image": "",
+                "name": "Tomiwa Philips",
+                "caption": "Please can you help me with some imp...",
+                "time": "2:10 PM"
+            },
+
+            {
+                "id": 2,
+                "image": "",
+                "name": "Dickson James",
+                "caption": "Please can you help me with some imp...",
+                "time": "2:10 PM"
+            },
+
+            {
+                "id": 3,
+                "image": "",
+                "name": "Fred Lam",
+                "caption": "Please can you help me with some imp...",
+                "time": "2:10 PM"
+            },
+
+            {
+                "id": 4,
+                "image": "",
+                "name": "Fgis Jammy",
+                "caption": "Please can you help me with some imp...",
+                "time": "2:10 PM"
+            },
+
+            {
+                "id": 5,
+                "image": "",
+                "name": "Jose Munroe",
+                "caption": "Please can you help me with some imp...",
+                "time": "2:10 PM"
+            },
+
+            {
+                "id": 6,
+                "image": "",
+                "name": "Martin Pearl",
+                "caption": "Please can you help me with some imp...",
+                "time": "2:10 PM"
+            },
+
+            {
+                "id": 7,
+                "image": "",
+                "name": "Freaking Drey",
+                "caption": "Please can you help me with some imp...",
+                "time": "2:10 PM"
+            },
+
+            {
+                "id": 8,
+                "image": "",
+                "name": "Pet Rose",
+                "caption": "Please can you help me with some imp...",
+                "time": "2:10 PM"
+            },
+
+            {
+                "id": 9,
+                "image": "",
+                "name": "Freaking Drey",
+                "caption": "Please can you help me with some imp...",
+                "time": "2:10 PM"
+            }
+        ]
+
+}
+

client/components/AIChatDarkmode.js

@@ -0,0 +1,72 @@
+import ChatNav from './ChatNav';
+import Message from './Message';
+import avater from '@/public/images/Rectangle.png';
+import Messagesfooter from './Messagesfooter';
+// import Image from 'next/image';
+
+const AIChatDarkmode = () => {
+  return (
+    <div
+      className="text-white w-10/12 m-auto rounded-lg pt-4"
+      style={{ width: '516px', height: '741px', backgroundColor: '#2D3648' }}
+    >
+      <ChatNav name={'Chattie AI - Bi'} img={avater} width={59} height={52} />
+
+      <div
+        className="my-10 px-8 py-8 ml-10 font-bold"
+        style={{
+          width: '346px',
+          height: '73px',
+          backgroundColor: '#FFBF00',
+          borderRadius: '87px',
+        }}
+      >
+        <Message message={'Hi! How are you doing?'} />
+      </div>
+
+      <div
+        className="text-center px-8 py-8 my-10 ml-32 font-bold"
+        style={{
+          width: '369px',
+          height: '148px',
+          backgroundColor: '#00286B',
+          borderRadius: '87px',
+        }}
+      >
+        <Message
+          message={
+            'Lorem ipsum dolor sit amet consectetur. Quam pellentesque arcu ac sit risus suspendisse. Molestie volutpat urna pellentesque enim duis convallis dictumst nibh varius.'
+          }
+        />
+      </div>
+
+      <div
+        className="my-10 px-8 py-8 ml-10 font-bold"
+        style={{
+          width: '346px',
+          height: '73px',
+          backgroundColor: '#FFBF00',
+          borderRadius: '87px',
+        }}
+      >
+        <Message message={'Hi! How are you doing?'} />
+      </div>
+
+      <div
+        className="px-8 py-8 ml-32 my-10 font-bold"
+        style={{
+          width: '346px',
+          height: '73px',
+          backgroundColor: '#00286B',
+          borderRadius: '87px',
+        }}
+      >
+        <Message message={'Hi! How are you doing?'} />
+      </div>
+
+      <Messagesfooter />
+    </div>
+  );
+};
+
+export default AIChatDarkmode;

client/components/AIChatLightmode.js

@@ -0,0 +1,52 @@
+import ChatNav from './ChatNav';
+import Message from './Message';
+import avater from '@/public/images/Rectangle.png';
+import Messagesfooter from './Messagesfooter';
+// import Image from 'next/image';
+
+const AIChatLightmode = () => {
+  return (
+    <div
+      className="text-white w-10/12 m-auto rounded-lg pt-4"
+      style={{ width: '516px', height: '741px', backgroundColor: '#EEE8FD' }}
+    >
+      <ChatNav name={'Chattie AI - Bi'} img={avater} width={59} height={52} />
+
+      <div className="my-10 px-8 py-8 ml-10 font-bold" style= {{ width: '346px', height: '73px', backgroundColor: '#FFBF00', borderRadius: '87px' }}>
+      <Message
+        message={'Hi! How are you doing?'}
+
+      />
+      </div>
+
+      <div className="text-center px-8 py-8 my-10 ml-32 font-bold" style= {{ width: '369px', height: '148px', backgroundColor: '#00286B', borderRadius: '87px'}}>
+      <Message
+        message={
+          'Lorem ipsum dolor sit amet consectetur. Quam pellentesque arcu ac sit risus suspendisse. Molestie volutpat urna pellentesque enim duis convallis dictumst nibh varius.'
+        }
+
+      />
+      </div>
+
+      <div className="my-10 px-8 py-8 ml-10 font-bold" style= {{ width: '346px', height: '73px', backgroundColor: '#FFBF00', borderRadius: '87px' }}>
+      <Message
+        message={'Hi! How are you doing?'}
+
+      />
+      </div>
+
+      <div className="px-8 py-8 ml-32 my-10 font-bold" style= {{ width: '346px', height: '73px', backgroundColor: '#00286B', borderRadius: '87px'}}>
+      <Message
+        message={'Hi! How are you doing?'}
+
+      />
+      </div>
+
+      <Messagesfooter />
+
+
+    </div>
+  );
+};
+
+export default AIChatLightmode;