overleaf/services/web/frontend/js/features/settings/components/emails/header.tsx
ilkin-overleaf 2f74b79d3a Merge pull request #17619 from overleaf/ii-bs5-rows-cols
[web] Bootstrap 5 containers, rows, cols

GitOrigin-RevId: 2b6b6fd1aebce739971e1428ab7c3cd6ec6c3858
2024-04-08 08:03:59 +00:00

53 lines
1.3 KiB
TypeScript

import { useTranslation } from 'react-i18next'
import EmailCell from './cell'
import ColWrapper from '@/features/ui/components/bootstrap-5/wrappers/col-wrapper'
import RowWrapper from '@/features/ui/components/bootstrap-5/wrappers/row-wrapper'
import classnames from 'classnames'
import { bsClassName } from '@/features/utils/bootstrap-5'
function Header() {
const { t } = useTranslation()
return (
<>
<RowWrapper>
<ColWrapper
md={4}
className={bsClassName({
bs5: 'd-none d-sm-block',
bs3: 'hidden-xs',
})}
>
<EmailCell>
<strong>{t('email')}</strong>
</EmailCell>
</ColWrapper>
<ColWrapper
md={8}
className={bsClassName({
bs5: 'd-none d-sm-block',
bs3: 'hidden-xs',
})}
>
<EmailCell>
<strong>{t('institution_and_role')}</strong>
</EmailCell>
</ColWrapper>
</RowWrapper>
<div
className={classnames(
bsClassName({ bs5: 'd-none d-sm-block', bs3: 'hidden-xs' }),
'horizontal-divider'
)}
/>
<div
className={classnames(
bsClassName({ bs5: 'd-none d-sm-block', bs3: 'hidden-xs' }),
'horizontal-divider'
)}
/>
</>
)
}
export default Header