33 lines
873 B
TypeScript
33 lines
873 B
TypeScript
import React from 'react';
|
|
|
|
interface AvatarProps {
|
|
avatarUrl: string;
|
|
name: string;
|
|
type: 'CFO' | 'CPO' | 'CTO'; // Specific types
|
|
speech?: string;
|
|
}
|
|
|
|
const Avatar: React.FC<AvatarProps> = ({ avatarUrl, name, type, speech }) => (
|
|
<div className='flex flex-col items-center space-y-2'>
|
|
{/* Avatar Image */}
|
|
<div className='w-32 h-32'>
|
|
<img
|
|
src={avatarUrl}
|
|
alt={`${name}'s Avatar`}
|
|
className='w-full h-full border-2 border-gray-300 rounded-full'
|
|
/>
|
|
</div>
|
|
{/* Name and Type */}
|
|
<span className='text-sm font-semibold'>{name}</span>
|
|
<span className='text-xs font-medium text-gray-600'>{type}</span>
|
|
{/* Speech Bubble */}
|
|
{speech && (
|
|
<div className='px-3 py-2 text-xs text-gray-800 bg-gray-200 border rounded shadow'>
|
|
{speech}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
export default Avatar;
|