34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { RotateCw } from 'lucide-react'
|
|
import { debugProps } from '@/lib/debug'
|
|
|
|
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"
|
|
{...debugProps('landscape-guard', 'LandscapeGuard', 'components/mobile/landscape-guard.tsx')}
|
|
>
|
|
<RotateCw className="size-12 text-primary" />
|
|
<p className="text-base font-medium text-center" data-debug-id="landscape-guard__title">Draai je telefoon naar landscape</p>
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
}
|