index.tsx

Filename	Percent	Threshold	Total	Covered	Uncovered
src/pages/index.tsx	100.00%	95%	98	98	0

import React from "react"
import { Helmet } from "react-helmet"
import { useMediaQuery } from "react-responsive"

import { IndexPageProps } from "@/common"

import DemosList from "@/components/demos-list"
import Layout from "@/components/layout"
import * as styles from "@/components/styles/styles.module.css"

const getColClassName = (isFirst: boolean) =>
  [
    "col-11",
    "col-lg-4",
    "col-xl-3",
    "offset-1",
    "offset-xl-2",
    `offset-lg-${isFirst ? "1" : "2"}`,
  ].join(" ")

const IndexPage = ({
  pageContext: { groupedDemos, meta, numberPerGroup },
}: IndexPageProps) => {
  const isMobile = useMediaQuery({ maxWidth: 767 })

  return (
    <Layout>
      <Helmet
        meta={[
          {
            content: meta.description,
            name: "description",
          },
        ]}
        title={"Demos - igncp"}
      />
      <div className="bs-callout bs-callout-info">
        Here are some <i>interactive data visualization demos</i> that are built
        with examples found on the web, which I've rewritten with ideas from
        other examples.
        {isMobile ? (
          <>
            <br />
            <br />
          </>
        ) : (
          " "
        )}
        The sources are always available. The idea is to try things using
        libraries like D3.js or Raphaël, and extensions of those.
      </div>

      <div id={styles.demosLegend}>
        <ul className="bs-callout bs-callout-warning">
          <li>
            <span className={`${styles.bullet} ${styles.d3js}`}>&#8226;</span>{" "}
            D3js
          </li>
          <li>
            <span className={`${styles.bullet} ${styles.raphael}`}>
              &#8226;
            </span>{" "}
            Raphaël
          </li>
        </ul>
      </div>

      <div className="row" id={styles.demosLists}>
        {isMobile ? (
          <div className={getColClassName(true)}>
            <DemosList
              demos={groupedDemos[0].concat(groupedDemos[1])}
              indexOffset={0}
            />
          </div>
        ) : (
          <>
            <div className={getColClassName(true)}>
              <DemosList demos={groupedDemos[0]} indexOffset={0} />
            </div>
            <div className={getColClassName(false)}>
              <DemosList demos={groupedDemos[1]} indexOffset={numberPerGroup} />
            </div>
          </>
        )}
      </div>
    </Layout>
  )
}

export default IndexPage

[]

TypeScript Coverage Report generated by type-coverage and typescript-coverage-report at Wed, 01 Jun 2022 21:16:57 GMT

TypeScript coverage report