87 lines
4.3 KiB
TypeScript
87 lines
4.3 KiB
TypeScript
import AutoExpandingTextArea from "@/components/Low/AutoExpandingTextarea";
|
|
import { useState } from "react";
|
|
import { FaEdit, FaFemale, FaMale } from "react-icons/fa";
|
|
import { FaTrash } from "react-icons/fa6";
|
|
import { ScriptLine } from ".";
|
|
|
|
interface MessageProps {
|
|
message: ScriptLine & { position: 'left' | 'right' };
|
|
color: string;
|
|
editing: boolean;
|
|
onEdit?: (text: string) => void;
|
|
onDelete?: () => void;
|
|
}
|
|
|
|
const Message: React.FC<MessageProps> = ({ message, color, editing, onEdit, onDelete }) => {
|
|
const [isEditing, setIsEditing] = useState(false);
|
|
const [editText, setEditText] = useState(message.text);
|
|
|
|
return (
|
|
<div className={`flex items-start gap-2 ${message.position === 'left' ? 'justify-start' : 'justify-end'}`}>
|
|
<div className="flex flex-col w-[50%]">
|
|
<div className={`flex items-center gap-2 ${message.position === 'right' && 'self-end'}`}>
|
|
{message.gender === 'male' ? (
|
|
<FaMale className="w-5 h-5 text-blue-500" />
|
|
) : (
|
|
<FaFemale className="w-5 h-5 text-pink-500" />
|
|
)}
|
|
<span className="text-sm font-medium">{message.name}</span>
|
|
</div>
|
|
<div className={`rounded-lg p-3 bg-${color}-100 relative group mt-1`}>
|
|
{isEditing ? (
|
|
<div className="flex flex-col gap-2">
|
|
<AutoExpandingTextArea
|
|
value={editText}
|
|
onChange={setEditText}
|
|
placeholder="Edit message..."
|
|
className="w-full min-h-[96px] px-4 py-2 border border-gray-200 rounded-lg focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-base resize-none"
|
|
/>
|
|
<div className="flex justify-between">
|
|
<button
|
|
className="px-3 py-1 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors text-sm font-medium"
|
|
onClick={() => {
|
|
onEdit?.(editText);
|
|
setIsEditing(false);
|
|
}}
|
|
>
|
|
Save
|
|
</button>
|
|
<button
|
|
className="px-3 py-1 bg-red-500 rounded-md hover:bg-gray-100 transition-colors text-sm font-medium text-white"
|
|
onClick={() => setIsEditing(false)}
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-start justify-between gap-2">
|
|
<p className="text-gray-700 whitespace-pre-wrap flex-grow">{message.text}</p>
|
|
{editing && (
|
|
<div className="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<div className="flex gap-1">
|
|
<button
|
|
onClick={() => setIsEditing(true)}
|
|
className="p-1 rounded hover:bg-gray-200 transition-colors"
|
|
>
|
|
<FaEdit className="w-3.5 h-3.5 text-gray-600" />
|
|
</button>
|
|
<button
|
|
onClick={onDelete}
|
|
className="p-1 rounded hover:bg-gray-200 transition-colors"
|
|
>
|
|
<FaTrash className="w-3.5 h-3.5 text-red-500" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Message;
|