{"size": 918, "ext": "js", "max_stars_repo_path": "src/components/CodeBlock.js", "max_stars_repo_name": "savva-k/imsavva.com", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/CodeBlock.js", "max_issues_repo_name": "savva-k/imsavva.com", "max_issues_repo_issues_event_min_datetime": "2021-07-18T15:40:22.000Z", "max_issues_repo_issues_event_max_datetime": "2021-07-18T21:58:38.000Z", "max_forks_repo_path": "src/components/CodeBlock.js", "max_forks_repo_name": "savva-k/imsavva.com", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 3, "max_forks_count": null, "avg_line_length": 30.6, "max_line_length": 76, "alphanum_fraction": 0.5076252723}
import React from "react"
import Highlight, { defaultProps } from "prism-react-renderer"

export default function CodeBlock({ children, className }) {
  // Pull the className
  const language = className ? className.replace(/language-/, "") || "" : ""

  return (
    <Highlight {...defaultProps} code={children} language={language}>
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
        <pre
          className={className}
          style={{ ...style, overflow: "scroll" }}
        >
          {tokens.map((line, index) => {
            const lineProps = getLineProps({ line, key: index })
            return (
              <div key={index} {...lineProps}>
                {line.map((token, key) => (
                  <span key={key} {...getTokenProps({ token, key })} />
                ))}
              </div>
            )
          })}
        </pre>
      )}
    </Highlight>
  )
}
