text: import React,{useRef,useEffect} from "react"
  import Highlight, { defaultProps } from "prism-react-renderer"
  import theme from "prism-react-renderer/themes/vsDark"
  import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live"
  const Button = props => (
    <button
      style={{
        position: "absolute",
        top: 0,
        right: 0,
        border: "none",
        boxShadow: "none",
        textDecoration: "none",
        margin: "8px",
        padding: "8px 12px",
        background: "#E2E8F022",
        color: "white",
        borderRadius: "8px",
        cursor: "pointer",
        color: "#E2E8F0",
        fontSize: "14px",
        fontFamily: "sans-serif",
        lineHeight: "1",
      }}
      {...props}
    />
  )
  const copyToClipboard = str => {
    const el = document.createElement("textarea")
    el.value = str
    el.setAttribute("readonly", "")
    el.style.position = "absolute"
    el.style.left = "-9999px"
    document.body.appendChild(el)
    el.select()
    document.execCommand("copy")
    document.body.removeChild(el)
  }
  export const Code = ({ codeString, language, ...props }) => {
    const [isCopied, setIsCopied] = React.useState(false)
    const prismRef = useRef(null)
    let hasTitle = false
    useEffect(() => {
  	//if(prismRef.current.previousElementSibling){
  		
  		console.log([...prismRef.current.previousElementSibling.classList].includes("gatsby-code-title"))
  		hasTitle = [...prismRef.current.previousElementSibling.classList].includes("gatsby-code-title")
  		if(hasTitle){
  			prismRef.current.childNodes[0].style.borderTop = "2px solid rgb(241, 241, 241)"
  			prismRef.current.childNodes[0].style.borderTopLeftRadius ="0px"
  			prismRef.current.childNodes[0].style.borderTopRightRadius ="0px"
  }
  		}
  
  		, [] )
    
    if (props["react-live"]) {
      return (
        <LiveProvider code={codeString} noInline={true}>
          <LiveEditor />
          <LiveError />
          <LivePreview />
        </LiveProvider>
      )
    } else {
      return (
        <Highlight
          {...defaultProps}
          code={codeString}
          language={language}
          theme={theme}
  
        >
          {/* argument String을 Tokenize해서 React Component로 render */}
          {({ className, style, tokens, getLineProps, getTokenProps }) => (
            <div 		ref={prismRef} className="gatsby-highlight" data-language={language}>
              {/*<pre className={className} style={style}>*/}
              <pre
                className={className}
                style={{
                  ...style,
                  padding: "2rem",
                  position: "relative",
  				
                }}
              >
                <Button
                  onClick={() => {
                    copyToClipboard(codeString)
                    setIsCopied(true)
                    setTimeout(() => setIsCopied(false), 3000)
                  }}
                >
                  {isCopied ? "🎉 Copied!" : "Copy"}
                </Button>
               {language && <div className="css-1ihtrfp">
                  <p className="css-6u3avo">{language}</p>
                </div>}
                {tokens.map((line, i) => (
                  <div {...getLineProps({ line, key: i })}>
                    {line.map((token, key) => (
                      <span {...getTokenProps({ token, key })} />
                    ))}
                  </div>
                ))}
              </pre>
            </div>
          )}
        </Highlight>
      )
    }
  }
  