45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
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 (
|
|
<>
|
|
{show &&
|
|
<Box p='4' mx={{ base: 0, md: 4 }}>
|
|
<Flex justifyContent={'flex-end'} alignItems={'center'}>
|
|
<Button bgColor={showSuccess ? 'green.400' : ''} onClick={handleClick}>
|
|
{showSuccess ? t('search.copy_success') : t('search.copy_search_link')} <Icon as={IoShareSocialOutline} />
|
|
</Button>
|
|
</Flex>
|
|
</Box>}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default CopyToClipboardButton;
|