Chat Page Made

src/App.js

@@ -31,6 +31,7 @@ import CallBack from './view/CallBack';
 import AdminPanel from './view/admin';
 import AddProduct from './view/addProduct';
 import AddExam from './view/addExam';
+import ChatPage from './view/chatPage';
 
 let data = [
   {
@@ -699,6 +700,7 @@ function App() {
           <Route path="/register" element={<Register  activeLogin={activeLogin}/>}/>
           <Route path="/accounting" element={<Accounting />} />
           <Route path="/messages" element={<Messages />} />
+          <Route path="/messages/:id" element={<ChatPage />} />
           <Route path="/services" element={<Services />} />
           {/* <Route path="/dashboard" element={ <Dashboard
                 ActiveUserFullInfo={ActiveUserFullInfo}

src/view/chatPage/index.js

@@ -0,0 +1,136 @@
+import React from "react";
+import sendIcon from "../../assets/img/vuesax-linear-direct-left.svg";
+import avatar6 from "../../assets/img/avatar/sarah-brown-tTdC88_6a_I-unsplash.jpg";
+import avatar5 from "../../assets/img/avatar/nicolas-horn-MTZTGvDsHFY-unsplash.jpg";
+const ChatPage = ({
+    messages,
+    user,
+    contact,
+}) => {
+    const textareaHanler=(e)=>{
+        e.target.style.height = `3rem`;
+        let scHeight = e.target.scrollHeight;
+        e.target.style.height = `${scHeight}px`;
+      }
+    return(
+        <div className="w-full flex  flex-col items-center py-20">
+            <div className="bg-gray-100 w-11/12 text-right p-3 text-blue3A text-sm">
+                {contact.name}
+            </div>
+
+            {
+                messages.map((message) => (
+                    <div className={`w-full p-5 flex ${message.userId == user.id && 'rtl'}`}>
+                        <img src={message.userId == contact.id ? contact.avatar : user.avatar} className={`w-16 h-16 rounded-full ${message.userId == user.id ? 'ml-2' : 'mr-2'}`}/>
+                        <div className={`${message.userId == user.id ? 'bg-blue-200 text-gray-500 text-sm rounded-tr-none' : 'bg-blue-400 text-gray-100 text-sm rounded-tl-none'} p-3 rounded-xl text-right flex flex-col `}>
+                            <p>{message.value}</p>
+                            <div className={` mt-2 w-full flex items-center ${message.userId == user.id ?'justify-end' : 'justify-start'} text-xs`}>
+                            {
+                                    message.userId == user.id && 
+                                    <>
+                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M7.75 12L10.58 14.83L16.25 9.17004" stroke="#979797" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                   
+                    </svg>
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{marginRight: '-12px'}}>
+                        <path d="M7.75 12L10.58 14.83L16.25 9.17004" stroke="#979797" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                   
+                    </svg></>
+                                }
+                                <p>{message.sendTime}</p>
+                               
+                                </div>
+                            </div>
+                        </div>
+                ))
+            }
+
+<div className="Messages-main-box-footer w-full  bg-gray-200 px-4 flex items-center justify-between flex-row-reverse fixed bottom-0 ">
+          <textarea
+            name="Messages-main-box-footer-textarea"
+            id="Messages-main-box-footer-textarea"
+            className="Messages-main-box-footer-textarea w-full bg-transparent h-12 max-h-72 pr-6 outline-0 pt-3"
+            style={{ resize: "none", direction: "rtl" }}
+            placeholder="پیام..."
+            onKeyUp={(e) => textareaHanler(e)}
+          ></textarea>
+          <img
+            src={sendIcon}
+            alt="sendIcon"
+            className=" bg-transparent"
+          />
+        </div>
+        </div>
+    )
+}
+ChatPage.defaultProps = {
+    contact: {
+        name: 'امیر محمد محمدی اصل مطلق فرد شیرازی',
+        avatar: avatar5,
+        id: 1
+    },
+    user: {
+        name: '',
+        avatar: avatar6,
+        id: 2,
+    },
+    messages: [
+        {
+            value: 'وقتی ثروت‌ های بزرگ به دست برخی مردم می‌افتد در پرتو آن نیرومند می‌شوند و در سایهٔ نیرومندی و ثروت خیالکنند که می‌توانند در خارج از وطن خود زندگی نمایند و خوشبخت و سرافراز باشند ولی به زودی می‌ فهمند که اشتباه کرده‌ اند و عظمت هر ملتی بر روی خرابه‌ های وطن خودش می‌باشد و بس',
+            status: 1,
+            sendTime: '13:41',
+            userId: 2,
+        },
+        {
+            value: 'وقتی ثروت‌ های بزرگ به دست برخی مردم می‌افتد در پرتو آن نیرومند می‌شوند و در سایهٔ نیرومندی و ثروت خیال می‌ کنند که می‌توانند ',
+            status: null,
+            sendTime: '13:42',
+            userId: 1,
+        },
+        {
+            value: 'سلام',
+            status: 1,
+            sendTime: '13:41',
+            userId: 2,
+        },
+        {
+            value: 'به به سلام',
+            status: null,
+            sendTime: '13:42',
+            userId: 1,
+        },
+        {
+            value: 'خوبی؟',
+            status: 1,
+            sendTime: '13:41',
+            userId: 2,
+        },
+        {
+            value: 'خوبم تو چطوری؟',
+            status: null,
+            sendTime: '13:42',
+            userId: 1,
+        },
+        {
+            value: 'چیکارا میکنی؟',
+            status: 1,
+            sendTime: '13:41',
+            userId: 2,
+        },
+        {
+            value: 'شدم بازیچه ی فرانت کاری که میخواد از صفحه چتی که زده تست بگیره',
+            status: null,
+            sendTime: '13:42',
+            userId: 1,
+        },
+        {
+            value: 'عالیه',
+            status: 1,
+            sendTime: '13:41',
+            userId: 2,
+        },
+
+    ]
+}
+
+export default ChatPage