7 changed files with 142 additions and 9 deletions
@ -0,0 +1,52 @@
@@ -0,0 +1,52 @@
|
||||
.follower { |
||||
border-color: rgba(0, 0, 0, 0.3); |
||||
border-width: 1px; |
||||
border-style: solid; |
||||
padding: 10px 10px; |
||||
border-radius: 15px; |
||||
height: 85px; |
||||
width: 300px; |
||||
overflow: hidden; |
||||
|
||||
&:hover { |
||||
border-color: var(--theme-text-link); |
||||
} |
||||
|
||||
.avatar { |
||||
height: 60px; |
||||
width: 60px; |
||||
border-color: rgba(0, 0, 0, 0.3); |
||||
border-width: 1px; |
||||
border-style: solid; |
||||
} |
||||
|
||||
.body { |
||||
color: var(--theme-color-components-text-on-light); |
||||
text-overflow: ellipsis; |
||||
} |
||||
|
||||
.account { |
||||
font-family: var(--theme-text-display-font-family); |
||||
font-weight: 600; |
||||
color: var(--theme-color-components-text-on-light); |
||||
} |
||||
|
||||
.icon { |
||||
position: relative; |
||||
width: 25px; |
||||
height: 25px; |
||||
top: -20px; |
||||
left: 40px; |
||||
border-color: white; |
||||
border-width: 1px; |
||||
border-style: solid; |
||||
border-radius: 50%; |
||||
background-size: cover; |
||||
background-position: center; |
||||
} |
||||
|
||||
.placeholder { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
@ -1,11 +1,52 @@
@@ -1,11 +1,52 @@
|
||||
/* eslint-disable react/no-unused-prop-types */ |
||||
/* eslint-disable @typescript-eslint/no-unused-vars */ |
||||
// TODO remove unused props
|
||||
import { FC } from 'react'; |
||||
import { ChatMessage } from '../../../interfaces/chat-message.model'; |
||||
import { Avatar, Col, Row } from 'antd'; |
||||
import dynamic from 'next/dynamic'; |
||||
import React, { FC } from 'react'; |
||||
import { ChatSocialMessage as ChatMessage } from '../../../interfaces/chat-social-message.model'; |
||||
import styles from './ChatSocialMessage.module.scss'; |
||||
|
||||
const FollowIcon = dynamic(() => import('./follow.svg')); |
||||
const LikeIcon = dynamic(() => import('./like.svg')); |
||||
const RepostIcon = dynamic(() => import('./repost.svg')); |
||||
|
||||
export interface ChatSocialMessageProps { |
||||
message: ChatMessage; |
||||
} |
||||
|
||||
export const ChatSocialMessage: FC<ChatSocialMessageProps> = () => <div>Component goes here</div>; |
||||
export const ChatSocialMessage: FC<ChatSocialMessageProps> = ({ message }) => { |
||||
const { body, title, image, link, type } = message; |
||||
|
||||
let Icon; |
||||
|
||||
switch (type.toString()) { |
||||
case 'follow': |
||||
Icon = FollowIcon; |
||||
break; |
||||
case 'like': |
||||
Icon = LikeIcon; |
||||
break; |
||||
case 'repost': |
||||
Icon = RepostIcon; |
||||
break; |
||||
default: |
||||
break; |
||||
} |
||||
|
||||
return ( |
||||
<div className={styles.follower}> |
||||
<a href={link} target="_blank" rel="noreferrer"> |
||||
<Row wrap={false}> |
||||
<Col span={6}> |
||||
<Avatar src={image} alt="Avatar" className={styles.avatar}> |
||||
<img src="/logo" alt="Logo" className={styles.placeholder} /> |
||||
</Avatar> |
||||
<Icon className={styles.icon} /> |
||||
</Col> |
||||
<Col> |
||||
<Row className={styles.account}>{title}</Row> |
||||
<Row className={styles.body}>{body}</Row> |
||||
</Col> |
||||
</Row> |
||||
</a> |
||||
</div> |
||||
); |
||||
}; |
||||
|
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 1.6 KiB |
Loading…
Reference in new issue