react-feather#ChevronRight JavaScript Examples

Question = ({ question, children }) => {
  const [visible, setVisible] = useState()

  function toggle() {
    setVisible(!visible)
  }

  return (
    <section className="faq-question">
      <h3 onClick={toggle}><ChevronRight className={classNames(resolvedStyles.className, "faq-question-chevron", { visible })} />{question}</h3>
      <div className={classNames("faq-question-answer", { visible })}>
        {children}
      </div>
      <style jsx>{styles}</style>
    </section>
  )
}

CustomTable = ({ columns, data, title }) => {
  const tableIcons = {
    Add: forwardRef((props, ref) => <Plus {...props} ref={ref} />),
    Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
    Clear: forwardRef((props, ref) => <X {...props} ref={ref} />),
    Delete: forwardRef((props, ref) => <Trash {...props} ref={ref} />),
    DetailPanel: forwardRef((props, ref) => (
      <ChevronRight {...props} ref={ref} />
    )),
    Edit: forwardRef((props, ref) => <Edit2 {...props} ref={ref} />),
    Export: forwardRef((props, ref) => <Save {...props} ref={ref} />),
    Filter: forwardRef((props, ref) => (
      <Filter {...props} ref={ref} strokeWidth={1.5} width={15} />
    )),
    FirstPage: forwardRef((props, ref) => (
      <ChevronsLeft {...props} ref={ref} />
    )),
    LastPage: forwardRef((props, ref) => (
      <ChevronsRight {...props} ref={ref} />
    )),
    NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
    PreviousPage: forwardRef((props, ref) => (
      <ChevronLeft {...props} ref={ref} />
    )),
    ResetSearch: forwardRef((props, ref) => <X {...props} ref={ref} />),
    Search: forwardRef((props, ref) => (
      <Search {...props} ref={ref} strokeWidth={1.5} width={18} />
    )),
    SortArrow: forwardRef((props, ref) => (
      <ChevronsDown {...props} ref={ref} />
    )),
    ThirdStateCheck: forwardRef((props, ref) => (
      <XCircle {...props} ref={ref} />
    )),
    ViewColumn: forwardRef((props, ref) => <Eye {...props} ref={ref} />),
  };

  return (
    <React.Fragment>
      <MaterialTable
        icons={tableIcons}
        columns={columns}
        data={data}
        title={title}
        options={{
          filtering: true,
          sorting: true,
          grouping: true,
          exportButton: true,
          headerStyle: {
            backgroundColor: "#3358f4",
            background: "linear-gradient(90deg, #3358f4, #1d8cf8)",
            color: "#FFF",
            backgroundRepeat: "no-repeat",
            textTransform: "uppercase",
          },
          rowStyle: (rowData) => ({
            backgroundColor: "rgb(0,0,0,0)",
          }),
        }}
      />
    </React.Fragment>
  );
}

function PinnedData({ history, open, setSavedOpen }) {
  const [savedPairs, , removePair] = useSavedPairs()
  const [savedTokens, , removeToken] = useSavedTokens()

  return !open ? (
    <RightColumn open={open} onClick={() => setSavedOpen(true)}>
      <SavedButton open={open}>
        <StyledIcon>
          <Bookmark size={20} />
        </StyledIcon>
      </SavedButton>
    </RightColumn>
  ) : (
    <RightColumn gap="1rem" open={open}>
      <SavedButton onClick={() => setSavedOpen(false)} open={open}>
        <RowFixed>
          <StyledIcon>
            <Bookmark size={16} />
          </StyledIcon>
          <TYPE.main ml={'4px'}>Saved</TYPE.main>
        </RowFixed>
        <StyledIcon>
          <ChevronRight />
        </StyledIcon>
      </SavedButton>
      <AccountSearch small={true} />
      <AutoColumn gap="40px" style={{ marginTop: '2rem' }}>
        <AutoColumn gap={'12px'}>
          <TYPE.main>Pinned Pairs</TYPE.main>
          {Object.keys(savedPairs).filter((key) => {
            return !!savedPairs[key]
          }).length > 0 ? (
            Object.keys(savedPairs)
              .filter((address) => {
                return !!savedPairs[address]
              })
              .map((address) => {
                const pair = savedPairs[address]
                return (
                  <RowBetween key={pair.address}>
                    <ButtonFaded onClick={() => history.push('/pair/' + address)}>
                      <RowFixed>
                        <TYPE.header>
                          <FormattedName
                            text={pair.token0Symbol + '/' + pair.token1Symbol}
                            maxCharacters={12}
                            fontSize={'12px'}
                          />
                        </TYPE.header>
                      </RowFixed>
                    </ButtonFaded>
                    <Hover onClick={() => removePair(pair.address)}>
                      <StyledIcon>
                        <X size={16} />
                      </StyledIcon>
                    </Hover>
                  </RowBetween>
                )
              })
          ) : (
            <TYPE.light>Pinned pairs will appear here.</TYPE.light>
          )}
        </AutoColumn>
        <ScrollableDiv gap={'12px'}>
          <TYPE.main>Pinned Tokens</TYPE.main>
          {Object.keys(savedTokens).filter((key) => {
            return !!savedTokens[key]
          }).length > 0 ? (
            Object.keys(savedTokens)
              .filter((address) => {
                return !!savedTokens[address]
              })
              .map((address) => {
                const token = savedTokens[address]
                return (
                  <RowBetween key={address}>
                    <ButtonFaded onClick={() => history.push('/token/' + address)}>
                      <RowFixed>
                        <TokenLogo address={address} size={'14px'} />
                        <TYPE.header ml={'6px'}>
                          <FormattedName text={token.symbol} maxCharacters={12} fontSize={'12px'} />
                        </TYPE.header>
                      </RowFixed>
                    </ButtonFaded>
                    <Hover onClick={() => removeToken(address)}>
                      <StyledIcon>
                        <X size={16} />
                      </StyledIcon>
                    </Hover>
                  </RowBetween>
                )
              })
          ) : (
            <TYPE.light>Pinned tokens will appear here.</TYPE.light>
          )}
        </ScrollableDiv>
      </AutoColumn>
    </RightColumn>
  )
}

function TransactionHistoryTable({ data }) {
  const breakpoint = useBreakpoints();
  const isMobile = breakpoint === 'isMobile';

  const columns = useMemo(
    () => [
      {
        Header: 'Kimden',
        accessor: 'from.name',
        Cell: ({ value }) => (
          <div className="person with-icon">
            <div>{value || 'Anonim'}</div>
            <div className="icon">
              <ArrowRight />
            </div>
          </div>
        ),
      },

      {
        Header: 'Kime',
        accessor: 'to.name',
        Cell: ({
          value,
          row: {
            original: { to },
          },
        }) => {
          let Element = 'div';
          let linkProps;
          if (to.campaignCode && to.campaignCode !== 'donate-all') {
            Element = 'a';
            linkProps = {
              href: `https://www.ucurtmaprojesi.com/campaign/${to.campaignCode}`,
            };
          }
          return (
            <Element className="person" {...linkProps}>
              {value}
            </Element>
          );
        },
      },
      {
        Header: 'Ne Zaman',
        accessor: 'when',
        id: 'when',
        Cell: ({ value }) => <div>{dayjs().to(dayjs(value * 1000))}</div>,
      },
      {
        Header: 'Ne Kadar',
        accessor: 'amount',
        Cell: ({
          value,
          row: {
            original: { tokenName },
          },
        }) => (
          <div className="amount">{`${
            typeof value === 'number' ? Math.floor(value) : value
          } ${tokenName}`}</div>
        ),
      },
    ],
    []
  );

  const defaultSort = useMemo(() => [{ id: 'when', desc: true }], []);

  const tableInstance = useTable(
    {
      columns,
      data,
      initialState: { sortBy: defaultSort, pageSize: 10, pageIndex: 0 },
      disableMultiSort: true,
      disableSortRemove: true,
    },
    useFlexLayout,
    useSortBy,
    usePagination
  );
  const {
    getTableProps,
    headerGroups,
    prepareRow,
    page,
    canPreviousPage,
    canNextPage,
    pageOptions,
    pageCount,
    gotoPage,
    nextPage,
    previousPage,
    state: { pageIndex },
  } = tableInstance;

  return (
    <div className="table-wrapper">
      <div {...(!isMobile && getTableProps())} className="table">
        {!isMobile &&
          headerGroups.map(headerGroup => (
            <div {...headerGroup.getHeaderGroupProps({})} className="tr">
              {headerGroup.headers.map(column => (
                <div
                  {...column.getHeaderProps(column.getSortByToggleProps())}
                  className="th title"
                >
                  {column.render('Header')}
                  {column.isSorted ? (
                    column.isSortedDesc ? (
                      <ChevronDown />
                    ) : (
                      <ChevronUp />
                    )
                  ) : (
                    ''
                  )}
                </div>
              ))}
            </div>
          ))}
        <div className="tbody">
          {page.map(row => {
            prepareRow(row);
            return (
              <div {...row.getRowProps()} className="tr">
                {row.cells.map(cell => {
                  return (
                    <div {...cell.getCellProps()} className="td">
                      {isMobile && (
                        <div className="td-header">{cell.render('Header')}</div>
                      )}
                      <div className="td-content">{cell.render('Cell')}</div>
                    </div>
                  );
                })}
              </div>
            );
          })}
        </div>
      </div>
      <div className="pagination">
        <div>
          <button
            className="button icon-button"
            type="button"
            onClick={() => gotoPage(0)}
            disabled={!canPreviousPage}
          >
            <ChevronsLeft />
          </button>
          <button
            className="button icon-button"
            type="button"
            onClick={() => previousPage()}
            disabled={!canPreviousPage}
          >
            <ChevronLeft />
          </button>
          <button
            className="button icon-button"
            type="button"
            onClick={() => nextPage()}
            disabled={!canNextPage}
          >
            <ChevronRight />
          </button>
          <button
            className="button icon-button"
            type="button"
            onClick={() => gotoPage(pageCount - 1)}
            disabled={!canNextPage}
          >
            <ChevronsRight />
          </button>
        </div>
        <span>
          Toplam {pageOptions.length} sayfadan
          <strong>{pageIndex + 1}.</strong>
          sayfayı görüntülüyorsunuz.
        </span>
      </div>
    </div>
  );
}

function Calendar({date, dates, slider}) {
  const [view, setView] = useState('month');
  const [activeStartDate, setActiveStartDate] = useState(parseIndiaDate(date));

  const minDate = parseIndiaDate(dates[0]);
  const maxDate = parseIndiaDate(dates[dates.length - 1]);

  const isDateDisabled = ({date, view}) => {
    return (
      view === 'month' &&
      !dates.includes(formatISO(date, {representation: 'date'}))
    );
  };

  const handleCalendarClick = (value) => {
    const clickedDate = formatISO(value, {representation: 'date'});
    slider.moveToSlide(dates.indexOf(clickedDate));
  };

  const handleViewButton = ({view}) => {
    setView(view);
  };

  const handleNavigationButton = ({activeStartDate}) => {
    setActiveStartDate(activeStartDate);
  };

  const handleNavigation = (direction) => {
    const newDate = add(
      activeStartDate,
      view === 'month' ? {months: direction} : {years: direction}
    );
    const lower =
      view === 'month' ? startOfMonth(minDate) : startOfYear(minDate);
    const upper = view === 'month' ? endOfMonth(maxDate) : endOfYear(maxDate);
    if (lower <= newDate && newDate <= upper) {
      setActiveStartDate(newDate);
    }
  };

  const swipeHandlers = useSwipeable({
    onSwipedRight: handleNavigation.bind(this, -1),
    onSwipedLeft: handleNavigation.bind(this, 1),
  });

  const handleWheel = (event) => {
    if (event.deltaX !== 0) {
      handleNavigation(Math.sign(event.deltaX));
    }
  };

  return (
    <div className="Calendar" onWheel={handleWheel} {...swipeHandlers}>
      <ReactCalendar
        value={parseIndiaDate(date)}
        tileDisabled={isDateDisabled}
        {...{minDate, maxDate, activeStartDate, view}}
        onActiveStartDateChange={handleNavigationButton}
        onViewChange={handleViewButton}
        minDetail="year"
        showFixedNumberOfWeeks
        onChange={handleCalendarClick}
        prevLabel={
          <div>
            <ChevronLeft size={18} />
          </div>
        }
        nextLabel={
          <div>
            <ChevronRight size={18} />
          </div>
        }
        prev2Label={
          <div>
            <ChevronsLeft size={18} />
          </div>
        }
        next2Label={
          <div>
            <ChevronsRight size={18} />
          </div>
        }
      />
    </div>
  );
}

function Table({
  data: states,
  date: timelineDate,
  regionHighlighted,
  setRegionHighlighted,
  expandTable,
  setExpandTable,
  hideDistrictData,
  hideDistrictTestData,
  hideVaccinated,
  lastDataDate,
  noDistrictDataStates,
}) {
  const {t} = useTranslation();
  const [sortData, setSortData] = useSessionStorage('sortData', {
    sortColumn: 'confirmed',
    isAscending: false,
    delta: false,
  });
  const [page, setPage] = useState(0);
  const [delta7Mode, setDelta7Mode] = useState(false);

  const [tableContainerRef, {width: tableWidth}] = useMeasure();

  const handleSortClick = useCallback(
    (statistic) => {
      if (sortData.sortColumn !== statistic) {
        setSortData(
          produce(sortData, (draftSortData) => {
            if (
              sortData.sortColumn === 'regionName' ||
              statistic === 'regionName'
            ) {
              draftSortData.isAscending = !sortData.isAscending;
            }
            draftSortData.sortColumn = statistic;
          })
        );
      } else {
        setSortData(
          produce(sortData, (draftSortData) => {
            draftSortData.isAscending = !sortData.isAscending;
          })
        );
      }
    },
    [sortData, setSortData]
  );

  const trail = useTrail(5, {
    from: {transform: 'translate3d(0, 10px, 0)', opacity: 0},
    to: {transform: 'translate3d(0, 0px, 0)', opacity: 1},
    config: config.wobbly,
  });

  const [allDistricts, setAllDistricts] = useState();

  const [tableOption, setTableOption] = useState('States');
  const [isPerLakh, setIsPerLakh] = useState(false);
  const [isInfoVisible, setIsInfoVisible] = useState(false);

  const getTableStatistic = useCallback(
    (data, statistic, type) => {
      const statisticConfig = STATISTIC_CONFIGS[statistic];
      if (type == 'total' && statisticConfig?.onlyDelta7) {
        type = 'delta7';
      }

      if (statisticConfig?.showDelta && type === 'total' && delta7Mode) {
        type = 'delta7';
      }

      return getStatistic(data, type, statistic, {
        expiredDate: lastDataDate,
        normalizedByPopulationPer: isPerLakh ? 'lakh' : null,
      });
    },
    [isPerLakh, lastDataDate, delta7Mode]
  );

  const districts = useMemo(() => {
    if (!isPerLakh) {
      return allDistricts;
    } else {
      return Object.keys(allDistricts || {})
        .filter(
          (districtKey) =>
            getStatistic(allDistricts[districtKey], 'total', 'population') > 0
        )
        .reduce((res, districtKey) => {
          res[districtKey] = allDistricts[districtKey];
          return res;
        }, {});
    }
  }, [isPerLakh, allDistricts]);

  const numPages = Math.ceil(
    Object.keys(districts || {}).length / DISTRICT_TABLE_COUNT
  );

  const sortingFunction = useCallback(
    (regionKeyA, regionKeyB) => {
      if (sortData.sortColumn !== 'regionName') {
        const statisticConfig = STATISTIC_CONFIGS[sortData.sortColumn];
        const dataType =
          sortData.delta && statisticConfig?.showDelta ? 'delta' : 'total';

        const statisticA = getTableStatistic(
          districts?.[regionKeyA] || states[regionKeyA],
          sortData.sortColumn,
          dataType
        );
        const statisticB = getTableStatistic(
          districts?.[regionKeyB] || states[regionKeyB],
          sortData.sortColumn,
          dataType
        );
        return sortData.isAscending
          ? statisticA - statisticB
          : statisticB - statisticA;
      } else {
        const regionNameA =
          districts?.[regionKeyA]?.districtName || STATE_NAMES[regionKeyA];
        const regionNameB =
          districts?.[regionKeyB]?.districtName || STATE_NAMES[regionKeyB];
        return sortData.isAscending
          ? regionNameA.localeCompare(regionNameB)
          : regionNameB.localeCompare(regionNameA);
      }
    },
    [
      districts,
      getTableStatistic,
      sortData.delta,
      sortData.isAscending,
      sortData.sortColumn,
      states,
    ]
  );

  const _setTableOption = useCallback(() => {
    setTableOption((prevTableOption) =>
      prevTableOption === 'States' ? 'Districts' : 'States'
    );
  }, []);

  useEffect(() => {
    const workerInstance = worker();
    workerInstance.getDistricts(states);
    workerInstance.addEventListener('message', (message) => {
      if (message.data.type !== 'RPC') {
        setAllDistricts(message.data);
        workerInstance.terminate();
      }
    });
  }, [tableOption, states]);

  useEffect(() => {
    setPage((p) => Math.max(0, Math.min(p, numPages - 1)));
  }, [numPages]);

  const handlePageClick = (direction) => {
    if (Math.abs(direction) === 1) {
      setPage(Math.min(Math.max(0, page + direction), numPages - 1));
    } else if (direction < 0) {
      setPage(0);
    } else if (direction > 0) {
      setPage(numPages - 1);
    }
  };

  const transition = useTransition(isInfoVisible, {
    from: TABLE_FADE_OUT,
    enter: TABLE_FADE_IN,
    leave: TABLE_FADE_OUT,
  });

  const tableStatistics = (
    expandTable ? TABLE_STATISTICS_EXPANDED : TABLE_STATISTICS
  ).filter(
    (statistic) =>
      (tableOption === 'States' ||
        STATISTIC_CONFIGS[statistic]?.category !== 'tested' ||
        !hideDistrictTestData) &&
      (STATISTIC_CONFIGS[statistic]?.category !== 'vaccinated' ||
        !hideVaccinated)
  );

  const showDistricts = tableOption === 'Districts' && !hideDistrictData;

  useEffect(() => {
    if (!showDistricts) {
      setPage(0);
    }
  }, [showDistricts]);

  useKeyPressEvent('?', () => {
    setIsInfoVisible(!isInfoVisible);
  });

  return (
    <div className="Table">
      <div className="table-top">
        <div className="table-top-left">
          <Tooltip message={'Toggle between states/districts'} hold>
            <animated.div
              className={classnames('toggle', 'option-toggle', {
                'is-highlighted': showDistricts,
                disabled: hideDistrictData,
              })}
              onClick={_setTableOption}
              style={trail[0]}
            >
              <DistrictIcon />
            </animated.div>
          </Tooltip>

          <Tooltip message={'Per lakh people'} hold>
            <animated.div
              className={classnames('toggle', 'lakh-toggle', {
                'is-highlighted': isPerLakh,
              })}
              onClick={setIsPerLakh.bind(this, !isPerLakh)}
              style={trail[1]}
            >
              <PerLakhIcon />
            </animated.div>
          </Tooltip>

          <Tooltip message={'Last 7 day values'} hold>
            <animated.div
              className={classnames('toggle', 'delta-toggle', {
                'is-highlighted': delta7Mode,
              })}
              style={trail[2]}
              onClick={setDelta7Mode.bind(this, !delta7Mode)}
            >
              <Delta7Icon />
            </animated.div>
          </Tooltip>

          <animated.div
            className={classnames('toggle', 'info-toggle', {
              'is-highlighted': isInfoVisible,
            })}
            onClick={setIsInfoVisible.bind(this, !isInfoVisible)}
            style={trail[3]}
          >
            <QuestionIcon size={14} />
          </animated.div>
        </div>

        <Tooltip message={`${expandTable ? 'Collapse' : 'Expand'} table`} hold>
          <animated.div
            className={classnames('toggle', 'expand-table-toggle', {
              'is-highlighted': expandTable,
            })}
            style={trail[4]}
            onClick={setExpandTable.bind(this, !expandTable)}
          >
            <FoldDownIcon size={16} />
          </animated.div>
        </Tooltip>
      </div>

      {transition(
        (style, item) =>
          item && (
            <animated.div className="table-helper" {...{style}}>
              <div className="helper-top">
                <div className="helper-left">
                  <div className="info-item">
                    <div>
                      <OrganizationIcon size={14} />
                    </div>
                    <p>{t('Toggle between States/Districts')}</p>
                  </div>

                  <div className="info-item">
                    <div>
                      <PeopleIcon size={16} />
                    </div>
                    <p>{t('Per Lakh People')}</p>
                  </div>

                  <div className="info-item">
                    <div>
                      <PulseIcon size={16} />
                    </div>
                    <p>{t('Last 7 day values')}</p>
                  </div>

                  <div className="info-item sort">
                    <div>
                      <SortDescIcon size={14} />
                    </div>
                    <p>{t('Sorted by Descending')}</p>
                  </div>

                  <div className="info-item sort">
                    <div>
                      <SortAscIcon size={14} />
                    </div>
                    <p>{t('Sorted by Ascending')}</p>
                  </div>

                  <div className="info-item sort">
                    <TableDeltaHelper />
                  </div>

                  <div className="info-item notes">
                    <div>
                      <InfoIcon size={15} />
                    </div>
                    <p>{t('Notes')}</p>
                  </div>
                </div>

                <div className="helper-right">
                  <div className="info-item">
                    <p>{t('Units')}</p>
                  </div>
                  {Object.entries({'1K': 3, '1L': 5, '1Cr': 7}).map(
                    ([abbr, exp]) => (
                      <div className="info-item abbr" key={abbr}>
                        <h5>{abbr}</h5>
                        <p>
                          10
                          <sup>{exp}</sup>
                        </p>
                      </div>
                    )
                  )}
                </div>
              </div>

              <h5 className="text">
                {t('Compiled from State Govt. numbers')},{' '}
                <Link to="/about">{t('know more')}!</Link>
              </h5>
            </animated.div>
          )
      )}

      <div className="table-container" ref={tableContainerRef}>
        <div
          className="table fadeInUp"
          style={{
            gridTemplateColumns: `repeat(${tableStatistics.length + 1}, auto)`,
          }}
        >
          <div className="row heading">
            <div
              className="cell heading"
              onClick={handleSortClick.bind(this, 'regionName')}
            >
              <div>{t(!showDistricts ? 'State/UT' : 'District')}</div>
              {sortData.sortColumn === 'regionName' && (
                <div className={'sort-icon'}>
                  {sortData.isAscending ? (
                    <SortAscIcon size={12} />
                  ) : (
                    <SortDescIcon size={12} />
                  )}
                </div>
              )}
            </div>

            {tableStatistics.map((statistic) => (
              <HeaderCell
                key={statistic}
                {...{
                  statistic,
                  sortData,
                  setSortData,
                }}
                handleSort={handleSortClick.bind(this, statistic)}
              />
            ))}
          </div>

          {!showDistricts &&
            Object.keys(states)
              .filter(
                (stateCode) =>
                  stateCode !== 'TT' &&
                  !(stateCode === UNASSIGNED_STATE_CODE && isPerLakh)
              )
              .sort((a, b) => sortingFunction(a, b))
              .map((stateCode) => {
                return (
                  <Row
                    key={stateCode}
                    data={states[stateCode]}
                    noDistrictData={noDistrictDataStates[stateCode]}
                    {...{
                      stateCode,
                      regionHighlighted,
                      setRegionHighlighted,
                      expandTable,
                      tableStatistics,
                      getTableStatistic,
                      tableWidth,
                    }}
                  />
                );
              })}

          {showDistricts && !districts && <TableLoader />}

          {showDistricts &&
            districts &&
            Object.keys(districts)
              .sort((a, b) => sortingFunction(a, b))
              .slice(
                page * DISTRICT_TABLE_COUNT,
                (page + 1) * DISTRICT_TABLE_COUNT
              )
              .map((districtKey) => {
                const noDistrictData =
                  noDistrictDataStates[districts[districtKey].stateCode];
                return (
                  <Row
                    key={districtKey}
                    data={districts[districtKey]}
                    districtName={districts[districtKey].districtName}
                    {...{
                      regionHighlighted,
                      setRegionHighlighted,
                      expandTable,
                      tableStatistics,
                      getTableStatistic,
                      noDistrictData,
                    }}
                  />
                );
              })}

          <Row
            key={'TT'}
            data={states['TT']}
            stateCode={'TT'}
            {...{
              regionHighlighted,
              setRegionHighlighted,
              expandTable,
              tableStatistics,
              getTableStatistic,
            }}
          />
        </div>
      </div>
      {showDistricts && (
        <div className="paginate">
          <div
            className={classnames('left', {disabled: page === 0})}
            onClick={handlePageClick.bind(this, -2)}
          >
            <ChevronsLeft size={16} />
          </div>
          <div
            className={classnames('left', {disabled: page === 0})}
            onClick={handlePageClick.bind(this, -1)}
          >
            <ChevronLeft size={16} />
          </div>
          <h5>{`${page + 1} / ${numPages}`}</h5>
          <div
            className={classnames('right', {disabled: page === numPages - 1})}
            onClick={handlePageClick.bind(this, 1)}
          >
            <ChevronRight size={16} />
          </div>
          <div
            className={classnames('right', {disabled: page === numPages - 1})}
            onClick={handlePageClick.bind(this, 2)}
          >
            <ChevronsRight size={16} />
          </div>
        </div>
      )}
    </div>
  );
}

DateNav = ({disabled}) => {
  // Creating a event listener on each stroke to avoid the issue of data not being refreshed inside the function
  // This is due to functionnal component relying on closure and the function passed to the event being "pulled" on top
  useEffect(() => {
    // Checking if we are on the client or server side
    if (typeof window !== 'undefined') {
      window.addEventListener('keydown', handleKeyDown)
      // Remove event listeners on cleanup
      return () => {
        window.removeEventListener('keydown', handleKeyDown)
      }
    }
  })

  const themeContext = useContext(ThemeContext)
  const {date, setDate} = useContext(AppContext)
  const formatedDate = formatDate(date)
  const previousDate = getPreviousDate(date)
  const nextDate = getNextDate(date)

  const handleKeyDown = event => {
    if (!disabled) {
      if (event.key === 'ArrowLeft' && previousDate) {
        setDate(previousDate)
      } else if (event.key === 'ArrowRight' && nextDate) {
        setDate(nextDate)
      }
    }
  }

  return (
    <div className='menu-header'>
      {!disabled && (
        <>
          <div
            className={`report-nav ${previousDate ? '' : 'disabled'}`}
            onClick={previousDate ? () => setDate(previousDate) : null}
          >
            <ChevronLeft />
          </div>
          <h3>Données au {formatedDate}</h3>
          <div
            className={`report-nav ${nextDate ? '' : 'disabled'}`}
            onClick={nextDate ? () => setDate(nextDate) : null}
          >
            <ChevronRight />
          </div>
        </>
      )}

      <style jsx>{`
        .menu-header {
          z-index: 2;
          display: flex;
          flex-flow: nowrap;
          justify-content: space-between;
          align-items: center;
          text-align: center;
          padding: 0 1em;
          background-color: ${themeContext.primary};
          color: #fff;
        }

        .menu-header h3 {
          margin: 0.5em;
        }

        .report-nav {
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .report-nav.disabled {
          color: #ffffff55;
        }

        .report-nav.disabled:hover {
          cursor: initial;
        }

        .report-nav:hover {
          cursor: pointer;
        }

        @media (max-width: ${theme.mobileDisplay}) {
          .menu-header {
            font-size: small;
            padding: ${disabled ? '1.7em 1em' : '0.5em 1em'};
          }

          .menu-header h3 {
            margin: 0.2em;
          }
        }

        @media (max-width: 1320px) {
          .menu-header {
            font-size: small;
          }
        }
      `}</style>
    </div>
  )
}

Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query LandingTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `);

  return (
    <MDXProvider components={components}>
      <SEO title="Home" />
      <Header siteTitle={data.site.siteMetadata.title} />
      <InstallBar />
      <CarbonAds
        css={css`
          ${media.lg} {
            position: absolute;
            top: 0;
            right: 15px;
            .carbonplaceholder,
            #carbonads {
              background-color: #ffffff4f;
              color: #632f45;
            }
          }
        `}
      />

      <Container maxWidth={1400}>
        <PlacementExample />
        <PreventOverflowExample />
        <FlipExample />
      </Container>

      <Section>
        <Container>
          <Crop size={50} stroke="#ffe69d" />
          <Heading>In a nutshell, Popper:</Heading>
          <Ul>
            <Li>
              <Check />
              <strong>
                Places your tooltip or popover relative to the reference
              </strong>{' '}
              taking into account their sizes, and positions its arrow centered
              to the reference.
            </Li>
            <Li>
              <Check />
              <strong>
                Takes into account the many different contexts it can live in
              </strong>{' '}
              relative to the reference (different offsetParents, different or
              nested scrolling containers).
            </Li>
            <Li>
              <Check />
              <strong>
                Keeps your tooltip or popover in view as best as possible
              </strong>
              . It prevents it from being clipped or cut off (overflow
              prevention) and changes the placement if the original does not fit
              (flipping).
            </Li>
          </Ul>
        </Container>
      </Section>

      <Section>
        <Container>
          <CloudLightning size={50} stroke="#ffe69d" />
          <Heading>Our Sponsors</Heading>
          <p>
            Popper is proudly sponsored by the following organizations,
            <br />
            join them on{' '}
            <ExternalLinkStyled to="https://opencollective.com/floating-ui">
              Open Collective
            </ExternalLinkStyled>{' '}
            to support us.
          </p>

          <Sponsors />
        </Container>
      </Section>

      <Section>
        <Container>
          <Layers size={50} stroke="#ffe69d" />
          <Heading>Granular configuration with sensible defaults</Heading>
          <p>
            Popper aims to "just work" without you needing to configure much. Of
            course, there are cases where you need to configure Popper beyond
            its defaults – in these cases, Popper shines by offering high
            granularity of configuration to fine-tune the position or behavior
            of your popper.
          </p>
          <p>
            You can extend Popper with your own modifiers (or plugins) to make
            your popper work for you, no matter how advanced the scenario.
          </p>
        </Container>
      </Section>

      <Section>
        <Container>
          <Check size={50} stroke="#ffe69d" />
          <Heading>No compromises</Heading>
          <Ul>
            <Li>
              <Check />
              <strong>No detachment</strong>. Position updates take less than a
              millisecond on average devices. Popper doesn't debounce the
              positioning updates of the tooltip to the point where it will{' '}
              <em>ever</em> detach from its reference, but this doesn't come at
              the cost of poor performance.
            </Li>
            <Li>
              <Check />
              <strong>
                You don't have to change the DOM context of your tooltip or
                popover element
              </strong>
              ; it will work no matter where your popper and reference elements
              live, even in the most complex scenarios like nested scrolling
              containers or alternative offsetParent contexts.
            </Li>
            <Li>
              <Check />
              <strong>Still lightweight</strong>. Handling all of this
              complexity is still done in an efficient manner. The base Popper
              is only 2 kB minzipped.
            </Li>
          </Ul>
        </Container>
      </Section>

      <Section>
        <Container>
          <Heart size={50} stroke="#ffe69d" />
          <Heading>Free open-source, used by millions</Heading>
          <p>
            Popper has billions of hits across the web, is trusted by millions
            of developers in production, and used in popular libraries like
            Bootstrap and Material UI.
          </p>
          <Button
            href="https://opencollective.com/floating-ui"
            target="_blank"
            rel="noopener noreferrer"
          >
            Support us
          </Button>
          <UsedByContainer>
            {USED_BY_LIST.map(({ logo, label, url }) => (
              <UsedByLogo href={url} src={logo} alt={label} key={url} />
            ))}
          </UsedByContainer>
        </Container>
      </Section>

      <Section>
        <Container>
          <ChevronRight size={50} stroke="#ffe69d" />
          <Heading>Ready to start?</Heading>
          <p>
            Start reading{' '}
            <LinkStyled to="/docs/">Popper's documentation</LinkStyled>!
          </p>
        </Container>
      </Section>

      <Footer>
        <Container>
          <p>© {new Date().getFullYear()} MIT License</p>
        </Container>
      </Footer>
    </MDXProvider>
  );
}

Layout = ({ children, location, pageResources, ...props }) => {
  const path = location.pathname;
  function getPrevNextRoutes(routes) {
    const validRoutes = flatten(createTree(processRoutes(routes, path)));

    const currentPathIndex = validRoutes.findIndex(
      route => route.slug === path
    );

    return {
      prev: validRoutes[currentPathIndex - 1],
      next: validRoutes[currentPathIndex + 1],
    };
  }

  // HACK: remove this if the plugin can somehow work by default...
  // Fixes the anchor not being scrolled to on page load
  useLayoutEffect(anchorScroll, []);

  return (
    <MDXProvider components={components}>
      <Global
        styles={css`
          h1,
          h2,
          h3,
          h4,
          h5,
          h6 {
            color: #f4e0f1;
            font-weight: bold;
          }

          h1 {
            font-size: 40px;
            margin-top: 20px;
            padding-top: 20px;
            line-height: 1.1;
          }

          h2 {
            font-size: 32px;
            line-height: 1.3;
          }

          h3 {
            font-size: 24px;
            margin-bottom: 10px;
            margin-top: 40px;
          }

          h4 {
            font-size: 20px;
            margin-bottom: 10px;
          }

          h5 {
            font-size: 18px;
          }

          h2::before {
            content: ' ';
            display: block;
            border-bottom: 1px solid #44395d;
            padding-top: 20px;
            margin-bottom: 40px;
          }

          blockquote {
            margin: 0;
            padding: 0.5em 30px;
            border-radius: 0px 10px 10px 0px;
            background-color: rgba(135, 82, 27, 0.25);
            color: #ddc5a1;
            border-left: 2px dashed #ddc5a1;
          }

          h3 > code[class*='language-'] {
            color: #ffe69d;
          }

          ul {
            padding-left: 20px;
          }

          li {
            margin-bottom: 5px;
          }

          a {
            color: #ffe69d;
            text-decoration: none;
            padding-bottom: 1px;
            border-bottom: 2px solid rgba(255, 228, 148, 0.25);
            transition: border-bottom-color 0.15s ease-in-out;

            &:hover {
              border-bottom: 2px solid rgba(255, 228, 148, 1);
            }

            &:active {
              border-bottom-style: dashed;
            }
          }

          ${media.md} {
            pre[class*='language-'] {
              padding: 15px 20px;
            }
          }

          h1 .gatsby-link-icon {
            display: none;
          }

          h2,
          h3,
          h4,
          h5,
          h6 {
            &:hover {
              .gatsby-link-icon {
                opacity: 1;
              }
            }
          }

          .gatsby-link-icon {
            fill: #ffb6b3;
            border: none;
            margin-left: -30px;
            padding-right: 10px;
            opacity: 0;
            transition: opacity 0.15s ease-in-out;
            float: right;

            ${media.md} {
              float: left;
            }

            &:focus {
              opacity: 1;
            }

            &:hover {
              border: none;
            }

            svg {
              width: 20px;
              height: 20px;
            }
          }
        `}
      />
      <div>
        {pageResources && (
          <SEO
            title={
              pageResources.json.pageContext.frontmatter.title ||
              pageResources.json.pageContext.frontmatter.navigationLabel
            }
          />
        )}
        <Navigation root="/" target="location" path={path} />
        <Main>
          <Container>
            {children}
            <EditPage path={path} />
          </Container>
          <MdxRoutes>
            {routes => {
              const { prev, next } = getPrevNextRoutes(routes);
              return (
                <NavButtonWrapper>
                  <NavButtonContainer>
                    <NavButtonCell>
                      {prev && (
                        <NavButton to={`${prev.slug}`} data-first>
                          <NavButtonDirection data-prev>
                            <ChevronLeft size={28} css={arrowCss} />
                          </NavButtonDirection>
                          {prev.navigationLabel}
                        </NavButton>
                      )}
                    </NavButtonCell>
                    <NavDivider />
                    <NavButtonCell>
                      {next && (
                        <NavButton to={`${next.slug}`} data-last>
                          {next.navigationLabel}
                          <NavButtonDirection data-next>
                            <ChevronRight size={28} css={arrowCss} />
                          </NavButtonDirection>
                        </NavButton>
                      )}
                    </NavButtonCell>
                  </NavButtonContainer>
                </NavButtonWrapper>
              );
            }}
          </MdxRoutes>
        </Main>
        <FooterStyled>© {new Date().getFullYear()} MIT License</FooterStyled>
      </div>
    </MDXProvider>
  );
}