2022-10-06 08:43:24 +03:00
|
|
|
import { Avatar, Col, Row } from 'antd';
|
|
|
|
import dynamic from 'next/dynamic';
|
|
|
|
import React, { FC } from 'react';
|
2022-12-13 09:54:29 +03:00
|
|
|
import cn from 'classnames';
|
2022-10-06 08:43:24 +03:00
|
|
|
import { ChatSocialMessage as ChatMessage } from '../../../interfaces/chat-social-message.model';
|
|
|
|
import styles from './ChatSocialMessage.module.scss';
|
|
|
|
|
2023-01-11 03:39:12 +03:00
|
|
|
const FollowIcon = dynamic(() => import('./follow.svg'), {
|
|
|
|
ssr: false,
|
|
|
|
});
|
|
|
|
const LikeIcon = dynamic(() => import('./like.svg'), {
|
|
|
|
ssr: false,
|
|
|
|
});
|
|
|
|
const RepostIcon = dynamic(() => import('./repost.svg'), {
|
|
|
|
ssr: false,
|
|
|
|
});
|
2022-04-28 09:19:20 +03:00
|
|
|
|
2022-09-07 10:00:28 +03:00
|
|
|
export interface ChatSocialMessageProps {
|
2022-04-28 09:19:20 +03:00
|
|
|
message: ChatMessage;
|
|
|
|
}
|
|
|
|
|
2022-10-06 08:43:24 +03:00
|
|
|
export const ChatSocialMessage: FC<ChatSocialMessageProps> = ({ message }) => {
|
|
|
|
const { body, title, image, link, type } = message;
|
|
|
|
|
|
|
|
let Icon;
|
|
|
|
|
|
|
|
switch (type.toString()) {
|
2023-02-06 06:58:24 +03:00
|
|
|
case 'FEDIVERSE_ENGAGEMENT_FOLLOW':
|
2022-10-06 08:43:24 +03:00
|
|
|
Icon = FollowIcon;
|
|
|
|
break;
|
2023-02-06 06:58:24 +03:00
|
|
|
case 'FEDIVERSE_ENGAGEMENT_LIKE':
|
2022-10-06 08:43:24 +03:00
|
|
|
Icon = LikeIcon;
|
|
|
|
break;
|
2023-02-06 06:58:24 +03:00
|
|
|
case 'FEDIVERSE_ENGAGEMENT_REPOST':
|
2022-10-06 08:43:24 +03:00
|
|
|
Icon = RepostIcon;
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
2022-12-13 09:54:29 +03:00
|
|
|
<div className={cn([styles.follower, 'chat-message_social'])}>
|
2022-10-06 08:43:24 +03:00
|
|
|
<a href={link} target="_blank" rel="noreferrer">
|
|
|
|
<Row wrap={false}>
|
2023-02-20 01:57:44 +03:00
|
|
|
<Col span={6} className={styles.avatarColumn}>
|
|
|
|
<Avatar src={image} alt="Avatar" className={styles.avatar} size="large">
|
|
|
|
{title.charAt(0).toUpperCase()}
|
2022-10-06 08:43:24 +03:00
|
|
|
</Avatar>
|
2023-02-20 01:57:44 +03:00
|
|
|
|
2022-10-06 08:43:24 +03:00
|
|
|
<Icon className={styles.icon} />
|
|
|
|
</Col>
|
|
|
|
<Col>
|
|
|
|
<Row className={styles.account}>{title}</Row>
|
|
|
|
<Row className={styles.body}>{body}</Row>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|