{"size": 703, "ext": "js", "max_stars_repo_path": "src/Three/Background.js", "max_stars_repo_name": "G2069/gatsby-g-102-v1.02", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/Three/Background.js", "max_issues_repo_name": "G2069/gatsby-g-102-v1.02", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/Three/Background.js", "max_forks_repo_name": "G2069/gatsby-g-102-v1.02", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 23.4333333333, "max_line_length": 82, "alphanum_fraction": 0.5789473684}
import React, { useRef } from "react"
import { Html } from "@react-three/drei"
import { useThree } from '@react-three/fiber'
import { Link } from "gatsby"
import "./Button.css"
import CyberButton from "./CyberButton"

const Background = props => {
  const ref = useRef()
  const { viewport } = useThree()
  return (
    <mesh {...props} ref={ref} scale={(viewport.width * 4)} position={[0, 1, -2]}>
      <planeGeometry />
      <meshStandardMaterial
        color="lightblue"
        toneMapped={false}
        fog={false}
        envMapIntensity={0}
      />
      <Html>
        <Link to="/page-2">
          <CyberButton />
        </Link>
      </Html>
    </mesh>
  )
}

export default Background
