text: import React from 'react';
  import Layout from '@theme/Layout';
  import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
  
  import versions from '../../versions.json';
  
  function Versions() {
    const context = useDocusaurusContext();
    const { siteConfig = {} } = context;
  
    const latestVersion = versions[0];
    const repoUrl = `https://github.com/${siteConfig.organizationName}/${siteConfig.projectName}`;
  
    return (
      <Layout
        title={siteConfig.title}
        description="Graphback <head />">
        <div className="container">
          <div className="post">
            <header className="postHeader">
              <h1>{siteConfig.title} Versions</h1>
            </header>
            <p>New versions of this project are released every so often.</p>
            <h3 id="latest">Current version</h3>
            <table className="versions">
              <tbody>
                <tr>
                  <th>{latestVersion}</th>
                  <td>
                    {/* You are supposed to change this href where appropriate
                          Example: href="<baseUrl>/docs(/:language)/:id" */}
                    <a
                      href={`${siteConfig.baseUrl}docs/gettingstarted`}>
                      Documentation
                    </a>
                  </td>
                  <td>
                    <a href="">Release Notes</a>
                  </td>
                </tr>
              </tbody>
            </table>
            <p>
              This is the latest version published to npm.
            </p>
            <h3 id="rc">Master</h3>
            <table className="versions">
              <tbody>
                <tr>
                  <th>master</th>
                  <td>
                    {/* You are supposed to change this href where appropriate
                          Example: href="<baseUrl>/docs(/:language)/next/:id" */}
                    <a
                      href={`${siteConfig.baseUrl}docs/next/gettingstarted`}>
                      Documentation
                    </a>
                  </td>
                  <td>
                    <a href={repoUrl}>Source Code</a>
                  </td>
                </tr>
              </tbody>
            </table>
            <h3 id="archive">Past Versions</h3>
            <p>Here you can find previous versions of the documentation.</p>
            <table className="versions">
              <tbody>
                {versions.map(
                  (version, index) =>
                    version !== latestVersion && (
                      <tr key={index}>
                        <th>{version}</th>
                        <td>
                          {/* You are supposed to change this href where appropriate
                          Example: href="<baseUrl>/docs(/:language)/:version/:id" */}
                          <a
                            href={`${siteConfig.baseUrl}docs/${version}/gettingstarted`}>
                            Documentation
                          </a>
                        </td>
                        <td>
                          <a href={`${repoUrl}/releases/tag/v${version}`}>
                            Release Notes
                          </a>
                        </td>
                      </tr>
                    ),
                )}
              </tbody>
            </table>
            <p>
              You can find past versions of this project on{' '}
              <a href={repoUrl}>GitHub</a>.
            </p>
          </div>
        </div>
      </Layout>
    );
  }
  
  export default Versions;
  