Mahyar Khanbolooki
135 lines
6.0 KiB
TypeScript
135 lines
6.0 KiB
TypeScript
'use client';
|
|
|
|
import { ef } from '@/lib/helpers/utfNumbers';
|
|
import { EmojiHappy, Microphone2, Paperclip2 } from 'iconsax-react';
|
|
import React, { useMemo, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
type Props = object
|
|
|
|
type MessageModel = {
|
|
type: "sender" | "receiver",
|
|
senderName: string,
|
|
content: string,
|
|
date: string,
|
|
time: string,
|
|
}
|
|
|
|
function ChatIndex({ }: Props) {
|
|
|
|
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 submitMessage = async (formData: FormData) => {
|
|
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]);
|
|
|
|
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>
|
|
|
|
<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>
|
|
)
|
|
}
|
|
})}
|
|
</ul>
|
|
</div>
|
|
|
|
<section aria-labelledby={t("InputMessage.AriaLabelBy")} 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"
|
|
>
|
|
<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>
|
|
)
|
|
}
|
|
|
|
export default ChatIndex |