message: documents: using the shared details dialog
diff: import React from 'react'
  import { UseQueryResult } from 'react-query'
  import { observer } from 'mobx-react'
  -import { Dialog, Card, CardContent, Typography, Divider } from '@mui/material'
  import { useTranslation } from 'next-i18next'
  import { DocumentResponse } from 'gql/document'
  import { useDocument } from 'common/hooks/documents'
  import { ModalStore } from 'stores/dashboard/ModalStore'
  +import DetailsDialog from 'components/admin/DetailsDialog'
  export default observer(function DetailsModal() {
  - const { isDetailsOpen, hideDetails, selectedRecord } = ModalStore
  + const { selectedRecord } = ModalStore
  const { data }: UseQueryResult<DocumentResponse> = useDocument(selectedRecord.id)
  - const { t } = useTranslation()
  + const { t } = useTranslation('documents')
  - return (
  - <Dialog open={isDetailsOpen} onClose={hideDetails} sx={{ top: '-35%' }}>
  - <Card>
  - <CardContent>
  - <Typography variant="h5" sx={{ marginBottom: '16px' }}>
  - {t('documents:cta:details')}
  - </Typography>
  - <Divider />
  - <Typography variant="body1" sx={{ fontSize: 24, marginTop: '8px' }}>
  - {t('documents:type')}: {data?.type}
  - </Typography>
  - <Typography variant="body1" sx={{ fontSize: 24 }}>
  - {t('documents:name')}: {data?.name}
  - </Typography>
  - <Typography variant="body1" sx={{ fontSize: 24 }}>
  - {t('documents:filename')}: {data?.filename}
  - </Typography>
  - <Typography variant="body1" sx={{ fontSize: 24 }}>
  - {t('documents:filetype')}: {data?.filetype}
  - </Typography>
  - <Typography variant="body1" sx={{ fontSize: 24 }}>
  - {t('documents:description')}: {data?.description}
  - </Typography>
  - <Typography variant="body1" sx={{ fontSize: 24 }}>
  - {t('documents:sourceUrl')}:{' '}
  - {
  + const SourceUrl = () => (
  <a target="_blank" href={data?.sourceUrl} rel="noreferrer">
  - Link
  + {data?.sourceUrl}
  </a>
  - }
  - </Typography>
  - </CardContent>
  - </Card>
  - </Dialog>
  )
  +
  + const dataConverted = [
  + { name: 'ID', value: `${data?.id}` },
  + { name: t('type'), value: `${data?.type}` },
  + { name: t('name'), value: `${data?.name}` },
  + { name: t('filename'), value: `${data?.filename}` },
  + { name: t('filetype'), value: `${data?.filetype}` },
  + { name: t('description'), value: `${data?.description}` },
  + { name: t('sourceUrl'), value: <SourceUrl /> },
  + ]
  +
  + return <DetailsDialog data={dataConverted} />
  })
  