SalesHistoryLoaderNotReady.tsx

import { updateLinkWithAccountId } from "@helium10/re-core";
import { cssBody400, cssDisplay100Bold, NewButton } from "@helium10/re-ui-components";
import styled from "styled-components";

import { AppLinks } from "../../../core/routes";
import { useTranslation } from "../../../i18n/useTranslation";
import { salesHistoryLoaderImageSrc } from "../consts";

export const SalesHistoryLoaderNotReady = () => {
  const { t } = useTranslation();
  return (
    <Wrapper>
      <Header>
        <Image />
        <Title>{t("salesHistoryLoader.title")}</Title>
        <Description>{t("salesHistoryLoader.description")}</Description>
      </Header>
      <Actions>
        <AddLink href={updateLinkWithAccountId(AppLinks.suppliersIndex)} target={"_blank"}>
          <AddButton>{t("salesHistoryLoader.addButton")}</AddButton>
        </AddLink>
        <UploadLink href={updateLinkWithAccountId(AppLinks.settings)} target={"_blank"}>
          <UploadButton $buttonType={"secondary"}>
            {t("salesHistoryLoader.uploadButton")}
          </UploadButton>
        </UploadLink>
      </Actions>
    </Wrapper>
  );
};

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: ${({ theme }) => theme.spacing.sp64};
`;
const Header = styled.div`
  display: flex;
  flex-direction: column;
  gap: ${({ theme }) => theme.spacing.sp16};
  align-items: center;
`;
const Actions = styled.div`
  display: flex;
  align-items: center;
  gap: ${({ theme }) => theme.spacing.sp24};
`;
const Image = styled.img.attrs({
  src: salesHistoryLoaderImageSrc,
})`
  width: 100%;
  max-width: 280px;
  margin-bottom: ${({ theme }) => theme.spacing.sp24};
`;
const Title = styled.div`
  ${cssDisplay100Bold};
`;
const Description = styled.div`
  ${cssBody400};
  margin-bottom: ${({ theme }) => theme.spacing.sp16};
`;
const AddButton = styled(NewButton)``;
const UploadButton = styled(NewButton)``;
const AddLink = styled.a``;
const UploadLink = styled.a``;