{"size": 772, "ext": "js", "max_stars_repo_path": "renderer/components/UI/CopyBox.js", "max_stars_repo_name": "otech47/zap-desktop", "max_stars_repo_stars_event_min_datetime": "2017-08-11T01:41:03.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-28T00:04:41.000Z", "max_issues_repo_path": "renderer/components/UI/CopyBox.js", "max_issues_repo_name": "resslerruntime3/zap-desktop", "max_issues_repo_issues_event_min_datetime": "2017-08-17T07:59:17.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-29T16:31:31.000Z", "max_forks_repo_path": "renderer/components/UI/CopyBox.js", "max_forks_repo_name": "resslerruntime3/zap-desktop", "max_forks_repo_forks_event_min_datetime": "2017-08-17T01:58:23.000Z", "max_forks_repo_forks_event_max_datetime": "2022-02-28T00:01:19.000Z"}
{"max_stars_count": 1327, "max_issues_count": 3249, "max_forks_count": 280, "avg_line_length": 26.6206896552, "max_line_length": 72, "alphanum_fraction": 0.6230569948}
import React from 'react'
import PropTypes from 'prop-types'
import { Box, Card, Flex } from 'rebass/styled-components'
import ClippedText from './ClippedText'
import CopyButton from './CopyButton'

const CopyBox = ({ value, hint, onCopy, ...rest }) => {
  return (
    <Card bg="tertiaryColor" p={0} sx={{ borderRadius: 's' }} {...rest}>
      <Flex justifyContent="space-between">
        <ClippedText fontSize="s" p={3} textAlign="center" width={1}>
          {value}
        </ClippedText>
        <Box bg="primaryColor">
          <CopyButton hint={hint} onCopy={onCopy} p={3} value={value} />
        </Box>
      </Flex>
    </Card>
  )
}

CopyBox.propTypes = {
  hint: PropTypes.node,
  onCopy: PropTypes.func,
  value: PropTypes.string,
}

export default CopyBox
