ReactJS UI Ant Design Comment Component

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>

 

        }

        action={[

          <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>

  );

}

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Aller en haut