From 3b73ad49eacf4fd803e93175b0ced0297e236036 Mon Sep 17 00:00:00 2001
From: Ruchi <ruchikhandelwal914@gmail.com>
Date: Wed, 24 Jan 2024 14:37:41 +0530
Subject: [PATCH] Ui- Chatpage

---
 src/app/page.js                |  2 +
 src/app/ui/pages/chat/chat.css | 54 ++++++++++++++++++++++++
 src/app/ui/pages/chat/chat.js  | 75 ++++++++++++++++++++++++++++++++++
 src/app/ui/pages/home/home.js  |  1 +
 tailwind.config.js             |  1 +
 5 files changed, 133 insertions(+)
 create mode 100644 src/app/ui/pages/chat/chat.css
 create mode 100644 src/app/ui/pages/chat/chat.js

diff --git a/src/app/page.js b/src/app/page.js
index 45cabc21..f3f39035 100644
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -5,6 +5,7 @@ import { HashRouter, Route, Routes, Navigate } from "react-router-dom"
 import { authenticateUser } from "@/utils/utils";
 import Login from "./ui/pages/login/login";
 import Layout from "./ui/Layout";
+import Chat from "./ui/pages/chat/chat";
 import MyOrganization from "./ui/pages/organizations/organizations";
 import ProjectList from "./ui/pages/projects/project";
 import Projects from "./ui/pages/projects/projectDetails";
@@ -34,6 +35,7 @@ export default function Root() {
         <Routes>
           <Route path="/" element={<Home/>} />
           <Route path="/login" element={<Login/>} />
+          <Route path="/chat" element={<Chat/>} />
           <Route path="/forgot-password" element={<ForgotPassword />} />
           <Route path="/invite/:inviteCode" element={<SignUp />} />
           <Route
diff --git a/src/app/ui/pages/chat/chat.css b/src/app/ui/pages/chat/chat.css
new file mode 100644
index 00000000..f5991d3e
--- /dev/null
+++ b/src/app/ui/pages/chat/chat.css
@@ -0,0 +1,54 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.myInput{
+    width: 51.25rem;
+    outline: solid white;
+    height: 3.1rem;
+    margin-right: 1.2rem;
+    border-radius: 2.5rem;
+    padding-left: 1rem;
+}
+
+.grid-heading{ 
+  margin-top: 1.5rem;
+  margin-left:1.5rem;
+  font-weight: 700;
+  font-size: 1.25rem;
+  background: -webkit-linear-gradient(rgba(238, 102, 51, 1), rgba(238, 102, 51, 0));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+
+
+.div-grid{
+    width: 16.5rem;
+    background-color: white;
+    height: 16.5rem;
+    border-radius: 1.25rem;
+}
+
+.info-outline{
+    color: #6C5F5B;
+    margin-top: 3rem;
+    margin-left: 1rem;
+}
+
+.settings{
+    color: #6C5F5B;
+    margin-top: 3rem;
+    margin-left: 1rem;
+    margin-right: 1rem;
+}
+
+.user-profile{
+    background-color: #612CB7;
+    margin-top: 2rem;
+    width: 1.5rem;
+    height: 1.5rem;
+    color: white;
+    margin-right: 2rem;
+}
+
diff --git a/src/app/ui/pages/chat/chat.js b/src/app/ui/pages/chat/chat.js
new file mode 100644
index 00000000..a8faed24
--- /dev/null
+++ b/src/app/ui/pages/chat/chat.js
@@ -0,0 +1,75 @@
+"use client"
+import "./chat.css";
+import { Grid, IconButton,Avatar,Tooltip,Typography} from "@mui/material";
+import { InfoOutlined} from "@material-ui/icons";
+import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+
+
+export default function Chat()
+{
+    const router = useRouter();
+    return(
+        <>
+        
+        
+        <div className="w-100% h-100vh bg-white flex flex-col gap-2">
+            <div className="flex justify-between">
+            <img src="https://i.imgur.com/56Ut9oz.png" className="mt-4 ml-10 h-[61px] w-[60px]" onClick={() => router.push("/home") }></img>
+            <div className="flex">
+                <img src="https://i.imgur.com/FGmAyjz.png" className="w-6 h-6 mt-11"/>
+                <img src="https://i.imgur.com/A3Rcbqe.jpeg" className="w-6 h-6 mt-11 ml-4"/>
+                <h3 className="text-orange-600 text-xs font-bold mt-14">100</h3>
+                <InfoOutlined
+                    className="info-outline"           
+                />             
+                <SettingsOutlinedIcon
+                    className="settings"
+                />
+                <Avatar
+                    className="user-profile"
+                /> 
+            </div>      
+                     
+            </div>
+            <div className="w-[98%] h-[55rem] mx-auto bg-stone-600 bg-opacity-5 rounded-2xl flex flex-col items-center">
+                <div className="w-auto h-36 mt-20 mx-auto bg-white rounded-2xl flex flex-row gap-2">
+                    <img src="https://i.imgur.com/56Ut9oz.png" className="mt-6 mx-5 h-[6.2rem] w-[6rem]"></img>
+                    <div>
+                    <h3 className="text-3xl text-orange-600 font-bold mt-8">Namaste</h3>
+                    <p className="text-sm text-[#6c5f5b] font-normal mr-16">Tell me what’s on your mind or pick a suggestion. I have limitations and won't always get it right, but your <br></br> feedback will help me to improve.</p>
+                    </div> 
+                </div>
+                <div className="grid grid-cols-3 gap-9 mt-16">
+                    <div className="div-grid flex flex-col">
+                        <h3 className="grid-heading">What is Anudesh?</h3>
+                        <p className="text-xl mx-6">data leta hai multilingual(indic), will be used for model training for indic llms, 22, open source -  model and data</p>
+                    </div>
+                    <div className="div-grid">
+                        <h3 className="grid-heading">How can you help?</h3>
+                        <p className="text-xl mx-20 my-16">GIF</p>
+                    </div>
+                    <div className="div-grid">
+                        <h3 className="grid-heading">Why Contribute?</h3>
+                        <p className="text-xl mx-20 my-16">Graph</p>
+                    </div>
+                </div>
+
+                <div className="mt-48 flex">
+                    <input
+                       className="myInput"
+                       name=""
+                       placeholder="Enter a prompt here"
+                    /> 
+                    <img src="https://i.imgur.com/2sWOT6F.png" className=" w-5 h-4 mt-4"/>
+                </div>
+            </div>
+        </div>
+        
+        
+        
+
+        </>
+    )
+}
diff --git a/src/app/ui/pages/home/home.js b/src/app/ui/pages/home/home.js
index 9dc34e17..c1ec84ce 100644
--- a/src/app/ui/pages/home/home.js
+++ b/src/app/ui/pages/home/home.js
@@ -22,6 +22,7 @@ export default function Home() {
                         <div className="flex gap-8">
                             <button className="bg-orange-600 text-white text-xl p-4 rounded-md hover:bg-white hover:text-orange-600 border border-orange-600">Demo Video</button>
                             <button onClick={() => navigate("/login")} className="text-orange-600 bg-white text-xl p-4 rounded-md border border-orange-600 hover:bg-orange-600 hover:text-white">Sign In/Sign Up</button>
+                            <button onClick={() => navigate("/chat")} className="text-orange-600 bg-white text-xl p-4 rounded-md border border-orange-600 hover:bg-orange-600 hover:text-white">Chat Page</button>
                         </div>
                     </div>
                     <div className="pr-40">
diff --git a/tailwind.config.js b/tailwind.config.js
index 0c740f1b..7d9b4f00 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
+    './src/app/ui/pages/chat/chat.js',
     './src/app/ui/pages/home/home.js',
     './src/app/ui/pages/login/login.js',
   ],