add backdrop to recorder

MarconLP · Jul 9, 2023 · a74eb37 · a74eb37 · vercel · Jul 9, 2023
1 parent 60516f4
commit a74eb37
Showing 1 changed file with 13 additions and 0 deletions.
diff --git a/src/components/VideoRecordModal.tsx b/src/components/VideoRecordModal.tsx
@@ -25,6 +25,19 @@ export default function VideoRecordModal() {
   return (
     <Transition appear show={open} as={Fragment}>
       <Dialog as="div" className="relative z-10" onClose={handleClose}>
+        {/* backdrop */}
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-black bg-opacity-25" />
+        </Transition.Child>
+
         <div className="fixed inset-0 overflow-y-auto">
           <div className="flex min-h-full items-center justify-center p-4 text-center">
             <Transition.Child