millelibri/frontend/src/components/CopyToClipboardButton.tsx

import { Box, Button, Card, Flex, Icon, Spacer } from '@chakra-ui/react';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { IoShareSocialOutline } from 'react-icons/io5';
import MediaQuery from 'react-responsive';
import { MEDIA_QUERY_DESKTOP_STARTS, MEDIA_QUERY_MOBILE_ENDS } from '../constants/mediaquery';

export interface IProps {
  show: boolean
  onClick(): void
}

const CopyToClipboardButton: React.FC<IProps> = (props) => {

  const { show, onClick } = props

  const [showSuccess, setShowSuccess] = useState<boolean>(false)

  const { t } = useTranslation();

  const handleClick = () => {
    onClick()
    setShowSuccess(true)

    setTimeout(() => {
      setShowSuccess(false)
    }, 3000)
  }

  return (
    <>
      <MediaQuery minWidth={MEDIA_QUERY_DESKTOP_STARTS}>
        {show &&
          <Card backgroundColor={'transparent'} mt={{ base: 0, md: 4 }} mb={{ base: 0, md: 4 }} mx={{ base: 4, md: 4 }}>
            <Box p='4'>
              <Flex alignItems={'center'}>
                <Button bgColor={showSuccess ? 'green.400' : ''} onClick={handleClick}>
                  {showSuccess ? t('search.copy_success'): t('search.copy_search_link')} &nbsp; <Icon as={IoShareSocialOutline} />
                </Button>
              </Flex>
            </Box>
          </Card>}
      </MediaQuery>
      <MediaQuery maxWidth={MEDIA_QUERY_MOBILE_ENDS}>
        {show &&
          <Box p='4'>
            <Flex alignItems={'center'}>
              <Button bgColor={showSuccess ? 'green.400' : ''} onClick={handleClick}>
                {showSuccess ? t('search.copy_success')  : t('search.copy_search_link')} &nbsp; <Icon as={IoShareSocialOutline} />
              </Button>
            </Flex>
          </Box>}
      </MediaQuery>
    </>
  );
};

export default CopyToClipboardButton;