Merge pull request #44 from AI4Bharat/new_chat

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"
@@ -44,6 +45,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

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;
+}
+

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>
+
+
+
+
+        </>
+    )
+}

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',
   ],