import React, { createElement, useState } from
'react'
;
import { Comment, Avatar, Tooltip } from
'antd'
;
import
"antd/dist/antd.css"
;
import {
LikeOutlined, DislikeFilled,
DislikeOutlined, LikeFilled
} from
'@ant-design/icons'
;
export
default
function
App() {
const [likesCount, setLikesCount] = useState(0);
const [dislikesCount, setDislikesCount] = useState(0);
const [action, setAction] = useState(
null
);
return
(
<div style={{
display:
'block'
, width: 700, padding: 30
}}>
<h4>ReactJS Ant-Design Comment Component</h4>
<Comment
author={<a>Gourav Hammad</a>}
avatar={<Avatar style={{ backgroundColor:
'green'
}}>G</Avatar>}
content={
<p>
Greetings from GeeksforGeeks, I am sample comment.
I am good, what about you?
</p>
}
actions={[
<Tooltip title=
"Like"
>
<span onClick={() => {
setLikesCount(1);
setDislikesCount(0);
setAction(
'liked'
);
}}>
{createElement(action ===
'liked'
?
LikeFilled : LikeOutlined)}
{likesCount}
</span>
</Tooltip>,
<Tooltip title=
"Dislike"
>
<span onClick={() => {
setLikesCount(0);
setDislikesCount(1);
setAction(
'disliked'
);
}}>
{React.createElement(action ===
'disliked'
?
DislikeFilled : DislikeOutlined)}
{dislikesCount}
</span>
</Tooltip>
]}
datetime={
'30-05-2021 11:09AM'
}
/>
</div>
);
}