{"size": 537, "ext": "js", "max_stars_repo_path": "src/components/page-elements/img.js", "max_stars_repo_name": "theWhiteFox/thelocalhost", "max_stars_repo_stars_event_min_datetime": "2020-01-27T06:59:43.000Z", "max_stars_repo_stars_event_max_datetime": "2020-04-05T16:00:02.000Z", "max_issues_repo_path": "src/components/page-elements/img.js", "max_issues_repo_name": "theWhiteFox/thelocalhost", "max_issues_repo_issues_event_min_datetime": "2020-01-24T16:49:43.000Z", "max_issues_repo_issues_event_max_datetime": "2020-04-26T16:20:18.000Z", "max_forks_repo_path": "src/components/page-elements/img.js", "max_forks_repo_name": "theWhiteFox/thelocalhost", "max_forks_repo_forks_event_min_datetime": "2020-04-27T13:54:58.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-05T22:35:05.000Z"}
{"max_stars_count": 13, "max_issues_count": 242, "max_forks_count": 11, "avg_line_length": 20.6538461538, "max_line_length": 70, "alphanum_fraction": 0.5567970205}
import React from 'react'
import styled from 'styled-components'

const StyledImg = styled.img`
  &:hover {
    opacity: 0.5;
  }
  box-shadow: var(--box-shadow-xl);
`

export const Img = props => {
  const { children, ...rest } = props

  return (
    <>
      {rest.className === `gatsby-resp-image-image` ? (
        <StyledImg {...rest}>{children}</StyledImg>
      ) : (
        <a href={props.src} target="_blank" rel="noopener noreferrer">
          <StyledImg {...rest}>{children}</StyledImg>
        </a>
      )}
    </>
  )
}
