fix: chat page styles for dark theme
This commit is contained in:
Mahyar Khanbolooki
@@ -1,137 +1,160 @@
|
||||
'use client';
|
||||
'use client'
|
||||
|
||||
import { ef } from '@/lib/helpers/utfNumbers';
|
||||
import { EmojiHappy, Microphone2, Paperclip2 } from 'iconsax-react';
|
||||
import { ef } from '@/lib/helpers/utfNumbers'
|
||||
import { EmojiHappy, Microphone2, Paperclip2 } from 'iconsax-react'
|
||||
import React, { useMemo, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
type Props = object
|
||||
|
||||
type MessageModel = {
|
||||
type: "sender" | "receiver",
|
||||
senderName: string,
|
||||
content: string,
|
||||
date: string,
|
||||
time: string,
|
||||
type: 'sender' | 'receiver'
|
||||
senderName: string
|
||||
content: string
|
||||
date: string
|
||||
time: string
|
||||
}
|
||||
|
||||
function ChatIndex({ }: Props) {
|
||||
function ChatIndex ({}: Props) {
|
||||
const { t } = useTranslation('chat')
|
||||
|
||||
const { t } = useTranslation('chat');
|
||||
|
||||
const [messages, setMessages] = useState<Array<MessageModel>>([
|
||||
{
|
||||
type: "sender",
|
||||
senderName: "علی مصلحی",
|
||||
content: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است',
|
||||
date: '1403/09/30',
|
||||
time: '10:07'
|
||||
},
|
||||
{
|
||||
type: 'receiver',
|
||||
senderName: 'سیما فرهادی',
|
||||
content: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است',
|
||||
date: '1403/09/30',
|
||||
time: '10:07'
|
||||
},
|
||||
]);
|
||||
|
||||
const addMessageOutgoing = (model: MessageModel) => {
|
||||
setMessages((previous) => {
|
||||
return [...previous, model]
|
||||
})
|
||||
const [messages, setMessages] = useState<Array<MessageModel>>([
|
||||
{
|
||||
type: 'sender',
|
||||
senderName: 'علی مصلحی',
|
||||
content:
|
||||
'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است',
|
||||
date: '1403/09/30',
|
||||
time: '10:07'
|
||||
},
|
||||
{
|
||||
type: 'receiver',
|
||||
senderName: 'سیما فرهادی',
|
||||
content:
|
||||
'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است',
|
||||
date: '1403/09/30',
|
||||
time: '10:07'
|
||||
}
|
||||
])
|
||||
|
||||
const submitMessage = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
const formData = new FormData(e.currentTarget);
|
||||
const content = formData.get('textMessage');
|
||||
if (!content) return;
|
||||
const model: MessageModel = {
|
||||
type: 'sender',
|
||||
senderName: 'علی مصلحی',
|
||||
content: String(content),
|
||||
date: '1403/09/30',
|
||||
time: '10:07'
|
||||
}
|
||||
addMessageOutgoing(model);
|
||||
};
|
||||
const addMessageOutgoing = (model: MessageModel) => {
|
||||
setMessages(previous => {
|
||||
return [...previous, model]
|
||||
})
|
||||
}
|
||||
|
||||
const submitMessage = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault()
|
||||
const formData = new FormData(e.currentTarget)
|
||||
const content = formData.get('textMessage')
|
||||
if (!content) return
|
||||
const model: MessageModel = {
|
||||
type: 'sender',
|
||||
senderName: 'علی مصلحی',
|
||||
content: String(content),
|
||||
date: '1403/09/30',
|
||||
time: '10:07'
|
||||
}
|
||||
addMessageOutgoing(model)
|
||||
}
|
||||
|
||||
const messagesMemo = useMemo(() => messages, [messages]);
|
||||
const messagesMemo = useMemo(() => messages, [messages])
|
||||
|
||||
return (
|
||||
<section className="flex flex-col h-full pt-6">
|
||||
<h1 className="font-medium">علی مصلحی</h1>
|
||||
return (
|
||||
<section className='flex flex-col h-full pt-6'>
|
||||
<h1 className='font-medium'>علی مصلحی</h1>
|
||||
|
||||
<div className="bg-container rounded-[30px] flex flex-col justify-between mt-6 flex-1 px-6 pt-7 pb-8 overflow-hidden">
|
||||
<div className="overflow-y-auto flex flex-col-reverse">
|
||||
<ul className="grid gap-6 pb-6 ">
|
||||
{messagesMemo.map((v, i) => {
|
||||
if (v.type === "sender") {
|
||||
return (
|
||||
<li key={i} className='bg-[#F6F7FA] rounded-[30px] rounded-tr-none p-6'>
|
||||
<article>
|
||||
<p className='text-xs2'>
|
||||
{v.content}
|
||||
</p>
|
||||
<div className='bg-container rounded-[30px] flex flex-col justify-between mt-6 flex-1 px-6 pt-7 pb-8 overflow-hidden'>
|
||||
<div className='overflow-y-auto flex flex-col-reverse'>
|
||||
<ul className='grid gap-6 pb-6 '>
|
||||
{messagesMemo.map((v, i) => {
|
||||
if (v.type === 'sender') {
|
||||
return (
|
||||
<li
|
||||
key={i}
|
||||
className='bg-[#F6F7FA] dark:bg-gray-700 rounded-[30px] rounded-tr-none p-6'
|
||||
>
|
||||
<article>
|
||||
<p className='text-xs2'>{v.content}</p>
|
||||
|
||||
<span dir='ltr' className='text-[11px] float-end text-disabled-text mt-2.5'>
|
||||
{ef(`${v.time} | ${v.date}`)}
|
||||
</span>
|
||||
</article>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
else {
|
||||
return (
|
||||
<li key={i} className='bg-[#EBEDF5] rounded-[30px] rounded-tl-none p-6'>
|
||||
<article>
|
||||
<h6 className='text-xs font-medium'>
|
||||
{v.senderName}
|
||||
</h6>
|
||||
<p className='text-xs2 mt-2.5'>
|
||||
{v.content}
|
||||
</p>
|
||||
<span
|
||||
dir='ltr'
|
||||
className='text-[11px] float-end text-disabled-text mt-2.5'
|
||||
>
|
||||
{ef(`${v.time} | ${v.date}`)}
|
||||
</span>
|
||||
</article>
|
||||
</li>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<li
|
||||
key={i}
|
||||
className='bg-[#EBEDF5] dark:bg-gray-600 rounded-[30px] rounded-tl-none p-6'
|
||||
>
|
||||
<article>
|
||||
<h6 className='text-xs font-medium'>{v.senderName}</h6>
|
||||
<p className='text-xs2 mt-2.5'>{v.content}</p>
|
||||
|
||||
<span dir='ltr' className='text-[11px] float-end text-disabled-text mt-2.5'>
|
||||
{ef(`${v.time} | ${v.date}`)}
|
||||
</span>
|
||||
</article>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
<span
|
||||
dir='ltr'
|
||||
className='text-[11px] float-end text-disabled-text mt-2.5'
|
||||
>
|
||||
{ef(`${v.time} | ${v.date}`)}
|
||||
</span>
|
||||
</article>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<section aria-labelledby={t("InputMessage.AriaLabelBy")} className="w-full">
|
||||
<form
|
||||
onSubmit={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"
|
||||
>
|
||||
<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={t("InputMessage.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
|
||||
aria-labelledby={t('InputMessage.AriaLabelBy')}
|
||||
className='w-full'
|
||||
>
|
||||
<form
|
||||
onSubmit={submitMessage}
|
||||
className='focus-within:outline-blue-400 outline outline-transparent transition-colors duration-100 flex items-center gap-0 bg-transparent border border-border h-12 rounded-xl py-2.5 px-2'
|
||||
>
|
||||
<button
|
||||
type='button'
|
||||
className='active:bg-neutral-100 dark:active:bg-neutral-600 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={t('InputMessage.Placeholder')}
|
||||
/>
|
||||
<button
|
||||
type='button'
|
||||
className='active:bg-neutral-100 dark:active:bg-neutral-600 transition-colors duration-150 rounded-full p-1.5'
|
||||
>
|
||||
<EmojiHappy
|
||||
className='stroke-disabled2 dark:stroke-neutral-400'
|
||||
size={20}
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
type='button'
|
||||
className='active:bg-neutral-100 dark:active:bg-neutral-600 transition-colors duration-150 rounded-full p-1.5'
|
||||
>
|
||||
<Paperclip2
|
||||
className='stroke-disabled2 dark:stroke-neutral-400'
|
||||
size={20}
|
||||
/>
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
)
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChatIndex
|
||||
export default ChatIndex
|
||||
|
||||
Reference in New Issue
Block a user