import React from 'react';
import { SBox } from '../s-components/layout/s-box';
import { SInfoTitle } from '../s-components/s-info-title';
import { SInfoParagraph } from '../s-components/s-info-paragraph';

export const EmptyTopCharts: React.FC = () => {
  return (
    <SBox alignItems="center" px={16} pt={7} mb={-5}>
      <SInfoTitle uppercase mb={8}>
        Charts Not Available
      </SInfoTitle>
      <SInfoParagraph center>
        There are no available charts in this market, please change market.
      </SInfoParagraph>
    </SBox>
  );
};