Function ChemicalInfoDialog

export function ChemicalInfoDialog({ term, onClose }: ChemicalInfoDialogProps) {
  const { info, loading } = useChemicalInfo(term);
  const links = [
    {
      href: info?.pubchemUrl,
      label: i18n('chem_info_pubchem_link'),
      icon: 'https://pubchem.ncbi.nlm.nih.gov/favicon.ico',
    },
    {
      href: info?.wikipediaUrl,
      label: i18n('chem_info_wikipedia_link'),
      icon: 'https://en.wikipedia.org/static/favicon/wikipedia.ico',
    },
    {
      href: info?.nistUrl,
      label: i18n('chem_info_nist_link'),
      icon: 'https://webbook.nist.gov/favicon.ico',
    },
    {
      href: info?.osha?.cameoUrl,
      label: i18n('chem_info_cameo_link'),
      icon: 'https://cameochemicals.noaa.gov/favicon.ico',
    },
    {
      href: info?.osha?.nioshPocketGuideUrl,
      label: i18n('chem_info_niosh_link'),
      icon: 'https://www.cdc.gov/favicon.ico',
    },
  ].flatMap(({ href, label, icon }) => (href === undefined ? [] : [{ href, label, icon }]));

  return (
    <Dialog
      open={term !== undefined}
      onClose={onClose}
      maxWidth="sm"
      fullWidth
      aria-labelledby="chem-info-title"
    >
      <DialogTitle id="chem-info-title" sx={{ pr: 6 }}>
        {info?.properties?.title ?? info?.osha?.name ?? term}
        <IconButton
          aria-label={i18n('chem_info_close')}
          onClick={onClose}
          sx={{ position: 'absolute', right: 8, top: 8 }}
        >
          <CloseIcon />
        </IconButton>
      </DialogTitle>
      <DialogContent dividers>
        {loading || info === undefined ? (
          <Stack alignItems="center" py={4} spacing={1}>
            <CircularProgress size={28} />
            <Typography variant="body2">{i18n('chem_info_loading')}</Typography>
          </Stack>
        ) : (
          <ChemicalInfoBody info={info} />
        )}
      </DialogContent>
      <DialogActions>
        {links.length > 0 && (
          <Stack direction="row" spacing={0.5} sx={{ mr: 'auto', ml: 1 }}>
            {links.map((link) => (
              <Tooltip key={link.href} title={link.label}>
                <IconButton
                  component="a"
                  href={link.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label={link.label}
                  size="small"
                >
                  <LinkIcon src={link.icon} />
                </IconButton>
              </Tooltip>
            ))}
          </Stack>
        )}
        <Button onClick={onClose}>{i18n('chem_info_close')}</Button>
      </DialogActions>
    </Dialog>
  );
}
Copy