PROJECT_HIPSTAGRAM/src/components/comment/AddComment.jsx

import { Picker } from 'emoji-mart'
import 'emoji-mart/css/emoji-mart.css'
import React, { useState } from 'react'
import { Input,Col,Button } from 'antd'
import { SmileOutlined, SmileFilled,SendOutlined } from '@ant-design/icons'
import { Link } from 'react-router-dom'

const AddComment = ({ addComment, postId, style, width }) => {
  const [text, setComment] = useState('')
  const [showEmojiPicker, setShowEmojiPicker] = useState(false)
  const handleOK = () => setShowEmojiPicker(!showEmojiPicker)
  const addEmoji = ({ native }) => setComment((text + ' ' + native).trim())
  return (
    <>
      {showEmojiPicker && (
        <Picker
          style={style}
          theme="light"
          native={true}
          showPreview={false}
          showSkinTones={false}
          onSelect={(native) => addEmoji(native)}
        />
        )}
      
      <Col xl={{ span: 10, offset: 1 }}
       lg={{ span: 14, offset: 1 }}
       md={{ offset: 1, span: 14 }}
        sm={{ offset: 1, span: 10 }}
        xs={{ offset: 1, span: 10 }}
      >
      <Input
          style={{
          display:'flex',
          // display: 'flex',
          // width,
          // margin: '5px 10px',
          // padding:'5px'

        }}
          xl={{ size: "large" }}
          xs={{ size:'small'}}
        placeholder="Add a comment..."
        value={text}
        onChange={(e) => {
          setComment(e.target.value)
        }}
        onPressEnter={(e) => setComment(e.target.value)}
        />
      </Col>
      <Col xl={{ offset: 1, span: 1 }}
       sm={{ offset: 1, span: 1 }}
       xs={{offset: 1,  span: 1 }}
      >
      
        {!showEmojiPicker ? (
          
        <SmileOutlined className="SmileBtn" onClick={handleOK} />
      ) : (
        <SmileFilled className="SmileBtnFilled" onClick={handleOK} />
        )}
      </Col>
      <Col xl={{ offset: 1, span: 1 }}
       sm={{offset: 1,  span: 1 }}
        xs={{offset: 1 }}
        
      >
          
        <Button type="text"
       className="Send"
          
      disabled={text.length < 1}
      onClick={(e) => {
        addComment(postId, text) &&
        setComment((e.target.value = ''))
      }}
        >
       
        <SendOutlined
       className="Send"
      type="primary"
     
          />
        </Button>
        {/* <Button
          
          xl={{ size: 'large' }}
          xs={{ size: 'small' }}

        disabled={text.length < 1}
        type="primary"
        onClick={(e) => {
          addComment(postId, text) &&
          setComment((e.target.value = ''))
        }}
      >
        {' '}
        Publish{' '}
        </Button> */}
        </Col>
    </>
  )
}

export default AddComment