34 lines
1 KiB
TypeScript
34 lines
1 KiB
TypeScript
import Image from "next/image";
|
|
|
|
interface MessageHeaderProps {
|
|
personality: IPersonality;
|
|
}
|
|
|
|
const MessageHeader: React.FC<MessageHeaderProps> = ({
|
|
personality,
|
|
}) => {
|
|
return (
|
|
<div className="flex items-center p-4 sm:border-none bg-white rounded-2xl max-w-screen-md mt-2">
|
|
<div className="w-20 h-20 rounded-full overflow-hidden flex-shrink-0">
|
|
<Image
|
|
src={`/personality/${personality.key}.jpeg`}
|
|
alt={personality.title}
|
|
width={80}
|
|
height={80}
|
|
className="w-full h-full object-cover"
|
|
priority
|
|
/>
|
|
</div>
|
|
<div className="ml-4 flex-grow">
|
|
<h2 className="font-semibold text-gray-900">
|
|
{personality.title}
|
|
</h2>
|
|
<p className="text-sm text-gray-500">
|
|
{personality.subtitle}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MessageHeader;
|