47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
/**
|
|
* Rotate Prompt Component
|
|
*
|
|
* Shown when device is in portrait orientation to prompt user to rotate.
|
|
* Follows pattern: components/Offline/OfflineStatus.tsx
|
|
*/
|
|
|
|
import React from 'react';
|
|
import Icon from '@mdi/react';
|
|
import { mdiScreenRotation } from '@mdi/js';
|
|
|
|
interface RotatePromptProps {
|
|
/** Whether to show the prompt */
|
|
show: boolean;
|
|
/** Custom message to display */
|
|
message?: string;
|
|
}
|
|
|
|
/**
|
|
* Full-screen overlay prompting user to rotate their device.
|
|
* Displays a rotation icon and customizable message.
|
|
*/
|
|
export const RotatePrompt: React.FC<RotatePromptProps> = ({
|
|
show,
|
|
message = 'Please rotate your device for the best experience',
|
|
}) => {
|
|
if (!show) return null;
|
|
|
|
return (
|
|
<div className='fixed inset-0 z-[100] flex items-center justify-center bg-black/90'>
|
|
<div className='text-center text-white px-8'>
|
|
<Icon
|
|
path={mdiScreenRotation}
|
|
size={3}
|
|
className='mx-auto mb-6 animate-pulse'
|
|
/>
|
|
<p className='text-lg font-medium'>{message}</p>
|
|
<p className='text-sm text-gray-400 mt-2'>
|
|
This presentation is optimized for landscape viewing
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RotatePrompt;
|