{"size": 1781, "ext": "js", "max_stars_repo_path": "curi/website/src/routes/guides/GuideList.js", "max_stars_repo_name": "gribdesbois/yet-another-react-tutorial-curi-js-org-basics", "max_stars_repo_stars_event_min_datetime": "2017-05-13T11:18:51.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-05T17:03:00.000Z", "max_issues_repo_path": "curi/website/src/routes/guides/GuideList.js", "max_issues_repo_name": "gribdesbois/yet-another-react-tutorial-curi-js-org-basics", "max_issues_repo_issues_event_min_datetime": "2017-06-22T16:23:14.000Z", "max_issues_repo_issues_event_max_datetime": "2021-08-31T22:35:28.000Z", "max_forks_repo_path": "curi/website/src/routes/guides/GuideList.js", "max_forks_repo_name": "gribdesbois/yet-another-react-tutorial-curi-js-org-basics", "max_forks_repo_forks_event_min_datetime": "2017-04-18T20:47:41.000Z", "max_forks_repo_forks_event_max_datetime": "2021-06-18T11:34:23.000Z"}
{"max_stars_count": 300, "max_issues_count": 69, "max_forks_count": 14, "avg_line_length": 24.0675675676, "max_line_length": 80, "alphanum_fraction": 0.5738349242}
import React from "react";
import { Link } from "@curi/react-dom";

import GUIDE_API from "../../constants/guides";
import Page from "../../components/layout/Page";
import {
  TitledPlainSection,
  PlainSection,
  Paragraph
} from "../../components/layout/Sections";

let GroupGuides = ({ guides }) => (
  <ul>
    {guides.map(g => (
      <li key={g.name}>
        <Link name="Guide" params={{ slug: g.slug }}>
          {g.name}
        </Link>
      </li>
    ))}
  </ul>
);

function GuideLinks() {
  let groups = GUIDE_API.grouped();
  return (
    <menu>
      {Object.keys(groups).map(title => (
        <section key={title}>
          <h3>{title}</h3>
          <GroupGuides guides={groups[title]} />
        </section>
      ))}
    </menu>
  );
}

export default function GuideList() {
  return (
    <Page>
      <TitledPlainSection title="Curi Guides">
        <Paragraph>
          There are a number of guides to help you make the most of Curi in your
          application.
        </Paragraph>

        <Paragraph>
          The "basic" guides are designed to give you a solid understanding of
          how to use Curi and how it works.
        </Paragraph>

        <Paragraph>
          The "rendering" guides give an overview of how to use Curi with the
          currently supported renderers.
        </Paragraph>

        <Paragraph>
          The "advanced" guides will help you take advantage of more Curi
          features to get the most out of Curi.
        </Paragraph>

        <Paragraph>
          The "migration" guides are helpful for transitioning to Curi from
          other single-page application routers.
        </Paragraph>
      </TitledPlainSection>

      <PlainSection>
        <GuideLinks />
      </PlainSection>
    </Page>
  );
}
