Spaces:
Running
Running
File size: 2,262 Bytes
3a909c0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
import React from "react";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
} from "@/components/ui/dialog";
import { Camera, Mic } from "lucide-react";
interface PermissionModalProps {
open: boolean;
onOpenChange: (open: boolean) => void;
onPermissionsResult: (allow: boolean) => void;
}
const PermissionModal: React.FC<PermissionModalProps> = ({ open, onOpenChange, onPermissionsResult }) => {
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="bg-gray-900 border-gray-800 text-white sm:max-w-[480px] p-8">
<DialogHeader>
<div className="flex justify-center items-center gap-4 mb-4">
<Camera className="w-8 h-8 text-orange-500" />
<Mic className="w-8 h-8 text-orange-500" />
</div>
<DialogTitle className="text-white text-center text-2xl font-bold">
Enable Camera & Microphone
</DialogTitle>
</DialogHeader>
<div className="text-center space-y-6 py-4">
<DialogDescription className="text-gray-400 text-base leading-relaxed">
LiveLab requires access to your camera and microphone for a fully
immersive telepresence experience. This enables real-time video
feedback and voice command capabilities.
</DialogDescription>
<div className="flex flex-col sm:flex-row gap-4 justify-center pt-2">
<Button
onClick={() => onPermissionsResult(true)}
className="w-full sm:w-auto bg-orange-500 hover:bg-orange-600 text-white px-10 py-6 text-lg transition-all shadow-md shadow-orange-500/30 hover:shadow-lg hover:shadow-orange-500/40"
>
Allow Access
</Button>
<Button
onClick={() => onPermissionsResult(false)}
variant="outline"
className="w-full sm:w-auto border-gray-500 hover:border-gray-200 px-10 py-6 text-lg text-zinc-500 bg-zinc-900 hover:bg-zinc-800"
>
Continue without
</Button>
</div>
</div>
</DialogContent>
</Dialog>
);
};
export default PermissionModal;
|