fix: layouts
This commit is contained in:
Mahyar Khanbolooki
@@ -12,13 +12,13 @@ function ChatIndex({ }: Props) {
|
||||
};
|
||||
|
||||
return (
|
||||
<section className='h-full pb-8'>
|
||||
<h1 className='font-medium'>علی مصلحی</h1>
|
||||
<section className="flex flex-col h-full pt-6">
|
||||
<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'>
|
||||
<div className="bg-container rounded-[30px] mt-6 flex flex-col flex-1 px-6 pt-7 pb-8 overflow-hidden">
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<ul className="grid gap-6 pb-6 ">
|
||||
<li className='bg-[#F6F7FA] rounded-[30px] rounded-tr-none p-6'>
|
||||
<article>
|
||||
<p className='text-xs2'>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
|
||||
@@ -30,7 +30,61 @@ function ChatIndex({ }: Props) {
|
||||
</article>
|
||||
</li>
|
||||
|
||||
<li className='bg-[#EBEDF5] rounded-[30px] p-6'>
|
||||
<li className='bg-[#EBEDF5] rounded-[30px] rounded-tl-none 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>
|
||||
|
||||
<li className='bg-[#F6F7FA] rounded-[30px] rounded-tr-none 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] rounded-tl-none 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>
|
||||
|
||||
<li className='bg-[#F6F7FA] rounded-[30px] rounded-tr-none 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] rounded-tl-none p-6'>
|
||||
<article>
|
||||
<h6 className='text-xs font-medium'>
|
||||
سیما فرهادی
|
||||
@@ -45,23 +99,30 @@ function ChatIndex({ }: Props) {
|
||||
</article>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section aria-labelledby='ارسال پیام' className="absolute w-full bottom-8 left-0 px-6">
|
||||
<section aria-labelledby="ارسال پیام" className="w-full">
|
||||
<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>
|
||||
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"
|
||||
>
|
||||
<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='پیام خود را بنویسید'
|
||||
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>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user