add: chat page

2025-07-19 20:53:17 +03:30
parent 902623e196
commit 0e0345dd8b
2 changed files with 88 additions and 0 deletions
@@ -0,0 +1,72 @@
+'use client';
+
+import { EmojiHappy, Microphone2, Paperclip2 } from 'iconsax-react';
+import React from 'react'
+
+type Props = object
+
+function ChatIndex({ }: Props) {
+
+    const submitMessage = async (formData: FormData) => {
+        console.log(formData.get('textMessage'))
+    };
+
+    return (
+        <section className='h-full pb-8'>
+            <h1 className='font-medium'>علی مصلحی</h1>
+
+            <div className='bg-container rounded-[30px] mt-6 pt-7 px-6 pb-8 h-full relative'>
+                <section aria-labelledby='پیام های اخیر'>
+                    <ul className='grid gap-6'>
+                        <li className='bg-[#F6F7FA] rounded-[30px] p-6'>
+                            <article>
+                                <p className='text-xs2'>
+                                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
+                                </p>
+
+                                <span dir='ltr' className='text-[11px] float-end text-disabled-text mt-2.5'>
+                                    10:07  |  1403/09/30
+                                </span>
+                            </article>
+                        </li>
+
+                        <li className='bg-[#EBEDF5] rounded-[30px] p-6'>
+                            <article>
+                                <h6 className='text-xs font-medium'>
+                                    سیما فرهادی
+                                </h6>
+                                <p className='text-xs2 mt-2.5'>
+                                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است،
+                                </p>
+
+                                <span dir='ltr' className='text-[11px] float-end text-disabled-text mt-2.5'>
+                                    10:07  |  1403/09/30
+                                </span>
+                            </article>
+                        </li>
+                    </ul>
+                </section>
+
+                <section aria-labelledby='ارسال پیام' className="absolute w-full bottom-8 left-0 px-6">
+                    <form
+                        action={submitMessage}
+                        className="focus-within:outline-blue-400 outline outline-transparent transition-colors duration-100 flex items-center gap-0 bg-transparent border border-[#D0D0D0] h-12 rounded-xl py-2.5 px-2 mt-6">
+                        <button type='button' className='active:bg-neutral-100 transition-colors duration-150 rounded-full p-1'><Microphone2 className='stroke-foreground' size={24} /></button>
+                        <input
+                            name='textMessage'
+                            role='textbox'
+                            autoComplete='off'
+                            className='w-full text-[11px] h-full outline-none ms-1'
+                            type='text'
+                            placeholder='پیام خود را بنویسید'
+                        />
+                        <button type='button' className='active:bg-neutral-100 transition-colors duration-150 rounded-full p-1.5'><EmojiHappy className='stroke-disabled2' size={20} /></button>
+                        <button type='button' className='active:bg-neutral-100 transition-colors duration-150 rounded-full p-1.5'><Paperclip2 className='stroke-disabled2' size={20} /></button>
+                    </form>
+                </section>
+            </div>
+        </section>
+    )
+}
+
+export default ChatIndex
@@ -0,0 +1,16 @@
+'use client';
+
+import React from 'react'
+
+type Props = object
+
+function ChatIndex({ }: Props) {
+
+    return (
+        <section className='h-full pb-8'>
+           TODO
+        </section>
+    )
+}
+
+export default ChatIndex