{"size": 829, "ext": "js", "max_stars_repo_path": "pages/work.js", "max_stars_repo_name": "zipquote/prakharshukla.xyz", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "pages/work.js", "max_issues_repo_name": "zipquote/prakharshukla.xyz", "max_issues_repo_issues_event_min_datetime": "2021-01-24T07:29:09.000Z", "max_issues_repo_issues_event_max_datetime": "2021-01-25T07:33:33.000Z", "max_forks_repo_path": "pages/work.js", "max_forks_repo_name": "zipquote/prakharshukla.xyz", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 2, "max_forks_count": null, "avg_line_length": 25.90625, "max_line_length": 61, "alphanum_fraction": 0.6248492159}
import { useState, useRef, useEffect } from 'react';
import { Canvas, Layout, Timeline } from '../src/components';
import { API } from '../src/utils';

export default function Work({ works }) {
  const [height, setHeight] = useState(0);
  const eventRef = useRef(null);

  useEffect(() => {
    const element = eventRef.current;
    const dimensions = element.getBoundingClientRect();
    setHeight(dimensions.height + 10);
  }, []);

  return (
    <div className="relative" style={{ height }}>
      <Canvas.SPLASH className="absolute" />
      <div className="absolute w-full" ref={eventRef}>
        <Layout.FullWidth>
          <Timeline works={works} />
        </Layout.FullWidth>
      </div>
    </div>
  );
}

export function getStaticProps() {
  const works = API.getContent.works();

  return { props: { works } };
}
