front-hub/src/pages/AccountSettings/DocumentsDialog/DocumentItem.tsx

import axios from "axios";
import { Box, SxProps, Theme, Typography, useTheme } from "@mui/material";
import { Document, Page } from "react-pdf";
import { Buffer } from "buffer";
import { downloadFileToDevice } from "@root/utils/downloadFileToDevice";

interface Props {
  text: string;
  documentUrl: string;
  sx?: SxProps<Theme>;
}

export default function DocumentItem({ text, documentUrl = "", sx }: Props) {
  const theme = useTheme();

  const downloadFile = async () => {
    const { data } = await axios.get<ArrayBuffer>(documentUrl, {
      responseType: "arraybuffer",
    });

    if (!data) {
      return;
    }

    downloadFileToDevice(
      `${documentUrl.split("/").pop()?.split(".")?.[0] || "document"}.pdf`,
      Buffer.from(data)
    );

    return;
  };

  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        alignItems: "start",
        gap: "10px",
        ...sx,
      }}
    >
      <Typography
        sx={{
          color: "#4D4D4D",
          fontWeight: 500,
          fontVariantNumeric: "tabular-nums",
        }}
      >
        {text}
      </Typography>
      {documentUrl && (
        <>
          <Typography
            sx={{ color: theme.palette.purple.main, cursor: "pointer" }}
            onClick={downloadFile}
          >
            {documentUrl.split("/").pop()?.split(".")?.[0]}
          </Typography>
          <Document file={documentUrl}>
            <Page
              pageNumber={1}
              width={200}
              renderTextLayer={false}
              renderAnnotationLayer={false}
            />
          </Document>
        </>
      )}
    </Box>
  );
}