overleaf-cep/services/web/frontend/js/features/group-management/components/card.tsx
Tim Down 5c4cb50628 Merge pull request #24988 from overleaf/td-bs5-upgrade-and-rename
Apply minor upgrades to Bootstrap 5 and react-bootstrap

GitOrigin-RevId: eb013f38515ebd4b9572d139f00841aca344e3c6
2025-05-16 08:05:28 +00:00

43 lines
1.2 KiB
TypeScript

import { useTranslation } from 'react-i18next'
import getMeta from '@/utils/meta'
import useWaitForI18n from '@/shared/hooks/use-wait-for-i18n'
import { Card as BSCard, CardBody, Col, Row } from 'react-bootstrap'
import IconButton from '@/features/ui/components/bootstrap-5/icon-button'
type CardProps = {
children: React.ReactNode
}
function Card({ children }: CardProps) {
const { t } = useTranslation()
const groupName = getMeta('ol-groupName')
const { isReady } = useWaitForI18n()
if (!isReady) {
return null
}
return (
<div className="container">
<Row>
<Col xl={{ span: 4, offset: 4 }} md={{ span: 6, offset: 3 }}>
<div className="group-heading" data-testid="group-heading">
<IconButton
variant="ghost"
href="/user/subscription"
size="lg"
icon="arrow_back"
accessibilityLabel={t('back_to_subscription')}
/>
<h2>{groupName || t('group_subscription')}</h2>
</div>
<BSCard>
<CardBody>{children}</CardBody>
</BSCard>
</Col>
</Row>
</div>
)
}
export default Card