MIN

Создать универсальный компонент сообщения в папке src/components Message.tsx

Пропсами принимаем в него интерфейс

pic?: string, (Аватарка)
title: string, (заголовок)
message: string, (текст сообщения)
timeStamp: Date (время отправки)
isMe: boolean (От меня ли сообщение)
status: UserStatus; (Это enum, реализовывать его в src/types в отдельном файле userStatus.ts) (галочка. Одна, две, серые и синии, в зависимости от статуса)

export enum UserStatus {
online = 'online',
ofline = 'ofline',
}

Создать файл рядом с тестовыми данными - моками.
Компонент должен расширяться, исходя из количества текста, и окрашиваться взависимости от меня оно или собеседника.
Собеседнику сделай фон сообщения белым, а от меня - бежевым, как кнопка, но чуть светлее.
Функцию окрашивания галочки статуса реализуй в отдельном файле в папке src/utils, назови файл именем функции
По нажатию на title - выводим в консоль текст ( перешли на мероприятие)
Аватарка не круглая. а квадраная со скругленными углами, брать компонент https://mui.com/material-ui/react-avatar/ variant="rounded"