latex-ub/services/web/frontend/js/features/template/components/template-root.tsx
2025-05-05 12:24:05 +00:00

70 lines
2.5 KiB
TypeScript

import { useTranslation } from 'react-i18next'
import useWaitForI18n from '../../../shared/hooks/use-wait-for-i18n'
import withErrorBoundary from '../../../infrastructure/error-boundary'
import { GenericErrorBoundaryFallback } from '@/shared/components/generic-error-boundary-fallback'
import DefaultNavbar from '@/features/ui/components/bootstrap-5/navbar/default-navbar'
import Footer from '@/features/ui/components/bootstrap-5/footer/footer'
import getMeta from '@/utils/meta'
import OLCol from '@/features/ui/components/ol/ol-col'
import OLRow from '@/features/ui/components/ol/ol-row'
import TemplateDetails from './template-details'
import TemplatePreview from './template-preview'
import { useTemplateContext, TemplateProvider } from '../context/template-context'
function TemplateRoot() {
const { isReady } = useWaitForI18n()
if (!isReady) {
return null
}
return (
<TemplateProvider>
<TemplatePageContent />
</TemplateProvider>
)
}
function TemplatePageContent() {
const { t } = useTranslation()
const navbarProps = getMeta('ol-navbar')
const footerProps = getMeta('ol-footer')
const { template } = useTemplateContext()
const { templateLinks } = getMeta('ol-ExposedSettings') || []
const categoryName = templateLinks?.find(link => link.url === template.category)?.name
return (
<>
<DefaultNavbar {...navbarProps} />
<main id="main-content" className="gallery content content-page">
<div className="container">
<OLRow className="previous-page-link-container">
<OLCol lg={6}>
<a className="previous-page-link" href={'/templates/all'}>
<i className="material-symbols material-symbols-rounded" aria-hidden="true">arrow_left_alt</i>
{t('all_templates')}
</a>
{categoryName && template.category !== '/templates/all' && (
<>
<span className="mx-2">/</span>
<a className="previous-page-link" href={template.category}>
{categoryName}
</a>
</>
)}
</OLCol>
</OLRow>
<OLRow>
<OLCol className="template-item-left-section" md={6}>
<TemplateDetails />
</OLCol>
<OLCol className="template-item-right-section" md={6}>
<TemplatePreview />
</OLCol>
</OLRow>
</div>
</main>
<Footer {...footerProps} />
</>
)
}
export default withErrorBoundary(TemplateRoot, GenericErrorBoundaryFallback)