74 lines
2.5 KiB
TypeScript
74 lines
2.5 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import dynamic from 'next/dynamic'
|
|
import { useBack } from '@/hooks/useBack'
|
|
import { useVisitor } from '@/context/VisitorContext'
|
|
import { tPlain } from '@/lib/i18n'
|
|
import type { SectionDTO, OrderedTranslationAndResourceDTO } from '@/lib/api/types'
|
|
import AppBar from '@/components/ui/AppBar'
|
|
|
|
const PdfViewer = dynamic(() => import('./pdf/PdfViewer'), { ssr: false })
|
|
|
|
interface Props {
|
|
section: SectionDTO
|
|
slug: string
|
|
configId: string
|
|
languages: string[]
|
|
}
|
|
|
|
export default function PdfSection({ section, slug, configId, languages }: Props) {
|
|
const { language, setAvailableLanguages } = useVisitor()
|
|
const back = useBack()
|
|
|
|
useEffect(() => { setAvailableLanguages([]) }, [languages])
|
|
|
|
const pdfs = [...(section.pdfs ?? [])].sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
|
|
const [selectedIndex, setSelectedIndex] = useState(0)
|
|
|
|
function getPdfUrl(pdf: OrderedTranslationAndResourceDTO): string | undefined {
|
|
const translations = pdf.translationAndResourceDTOs ?? []
|
|
return (
|
|
translations.find((t) => t.language === language)?.resource?.url ??
|
|
translations[0]?.resource?.url
|
|
)
|
|
}
|
|
|
|
const currentUrl = pdfs.length > 0 ? getPdfUrl(pdfs[selectedIndex]) : undefined
|
|
|
|
return (
|
|
<div style={{ position: 'fixed', inset: 0, display: 'flex', flexDirection: 'column', background: 'var(--color-background)' }}>
|
|
<AppBar title={tPlain(section.title, language)} onBack={back} />
|
|
|
|
{pdfs.length > 1 && (
|
|
<div className="flex gap-2 px-4 py-2 overflow-x-auto shrink-0">
|
|
{pdfs.map((pdf, i) => (
|
|
<button
|
|
key={i}
|
|
onClick={() => setSelectedIndex(i)}
|
|
className="shrink-0 px-3 py-1.5 rounded-full text-xs font-medium"
|
|
style={{
|
|
background: i === selectedIndex ? 'var(--color-primary)' : 'transparent',
|
|
color: i === selectedIndex ? 'var(--color-on-primary)' : 'var(--color-text)',
|
|
border: i === selectedIndex ? 'none' : '1.5px solid var(--color-border)',
|
|
}}
|
|
>
|
|
PDF {i + 1}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<div style={{ flex: 1, borderRadius: '20px 20px 0 0', overflow: 'hidden' }}>
|
|
{!currentUrl ? (
|
|
<div className="h-full flex items-center justify-center text-sm p-8 text-center" style={{ color: 'var(--color-text-muted)' }}>
|
|
Aucun PDF à afficher
|
|
</div>
|
|
) : (
|
|
<PdfViewer url={currentUrl} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|