Madhura68
e68552bcfd
Toont rotate-overlay in portrait, niets in landscape. Kinderen blijven altijd in DOM — geen unmount zodat SSE-streams overleven bij rotatie. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
32 lines
935 B
TypeScript
32 lines
935 B
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { RotateCw } from 'lucide-react'
|
|
|
|
export function LandscapeGuard({ children }: { children: React.ReactNode }) {
|
|
const [isPortrait, setIsPortrait] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const mq = window.matchMedia('(orientation: portrait)')
|
|
const update = () => setIsPortrait(mq.matches)
|
|
update()
|
|
mq.addEventListener('change', update)
|
|
return () => mq.removeEventListener('change', update)
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
{children}
|
|
{isPortrait && (
|
|
<div
|
|
role="alert"
|
|
aria-live="assertive"
|
|
className="fixed inset-0 z-50 flex flex-col items-center justify-center gap-4 bg-background text-foreground p-6"
|
|
>
|
|
<RotateCw className="size-12 text-primary" />
|
|
<p className="text-base font-medium text-center">Draai je telefoon naar landscape</p>
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
}
|