75 lines
2.5 KiB
TypeScript
75 lines
2.5 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect } from 'react'
|
|
import { useBack } from '@/hooks/useBack'
|
|
import ChevronLeftIcon from '@/components/ui/ChevronLeftIcon'
|
|
import { useVisitor } from '@/context/VisitorContext'
|
|
import { tPlain } from '@/lib/i18n'
|
|
import type { SectionDTO } from '@/lib/api/types'
|
|
|
|
interface Props {
|
|
section: SectionDTO
|
|
slug: string
|
|
configId: string
|
|
languages: string[]
|
|
}
|
|
|
|
export default function WebSection({ section, slug, configId, languages }: Props) {
|
|
const { language, setAvailableLanguages } = useVisitor()
|
|
const back = useBack()
|
|
|
|
useEffect(() => { setAvailableLanguages([]) }, [languages])
|
|
|
|
const source = section.web?.source ?? section.source
|
|
const title = tPlain(section.title, language)
|
|
|
|
return (
|
|
<div style={{ position: 'fixed', inset: 0, display: 'flex', flexDirection: 'column', background: '#111' }}>
|
|
{/* AppBar sombre garanti — lisible quelle que soit la couleur de l'instance */}
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 12,
|
|
padding: '0 16px',
|
|
height: 56,
|
|
flexShrink: 0,
|
|
background: 'rgba(0,0,0,0.75)',
|
|
backdropFilter: 'blur(8px)',
|
|
}}
|
|
>
|
|
<button
|
|
onClick={back}
|
|
style={{
|
|
width: 40, height: 40, borderRadius: 16,
|
|
background: 'rgba(255,255,255,0.2)',
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|
border: 'none', cursor: 'pointer', flexShrink: 0,
|
|
}}
|
|
>
|
|
<ChevronLeftIcon color="white" size={20} />
|
|
</button>
|
|
<span style={{ color: 'white', fontWeight: 600, fontSize: 15, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
|
{title || 'Web'}
|
|
</span>
|
|
</div>
|
|
|
|
{/* iframe */}
|
|
<div style={{ flex: 1, borderRadius: '20px 20px 0 0', overflow: 'hidden' }}>
|
|
{source ? (
|
|
<iframe
|
|
src={source}
|
|
title={title}
|
|
sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
|
|
style={{ width: '100%', height: '100%', border: 'none', display: 'block' }}
|
|
/>
|
|
) : (
|
|
<div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#999', fontSize: 14, padding: 32, textAlign: 'center' }}>
|
|
La page ne peut pas être affichée, l'URL est incorrecte ou vide.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|