implement NewVideoMenu to select recording or uploading

src/components/NewVideoMenu.tsx

@@ -0,0 +1,65 @@
+import { Menu, Transition } from "@headlessui/react";
+import { Fragment, useState } from "react";
+import VideoRecordModal from "~/components/VideoRecordModal";
+import VideoUploadModal from "~/components/VideoUploadModal";
+
+export default function NewVideoMenu() {
+  const [recordOpen, setRecordOpen] = useState<boolean>(false);
+  const [uploadOpen, setUploadOpen] = useState<boolean>(false);
+
+  return (
+    <>
+      <VideoRecordModal open={recordOpen} setOpen={setRecordOpen} />
+      <VideoUploadModal open={uploadOpen} setOpen={setUploadOpen} />
+      <Menu as="div" className="relative inline-block text-left">
+        <Menu.Button>
+          <span className="cursor-pointer rounded border border-[#0000001a] px-2 py-2 text-sm text-[#292d34] hover:bg-[#fafbfc]">
+            New video
+          </span>
+        </Menu.Button>
+        <Transition
+          as={Fragment}
+          enter="transition ease-out duration-100"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          <Menu.Items className="absolute right-0 z-10 mt-2 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+            <div className="px-1 py-1 ">
+              <Menu.Item>
+                {({ active }) => (
+                  <div
+                    onClick={() => setRecordOpen(true)}
+                    className={`mx-2 flex h-8 w-40 cursor-pointer flex-row content-center rounded-md p-2 ${
+                      active ? "bg-gray-100" : ""
+                    }`}
+                  >
+                    <p className="leading-2 text-sm leading-4">
+                      Record a video
+                    </p>
+                  </div>
+                )}
+              </Menu.Item>
+              <Menu.Item>
+                {({ active }) => (
+                  <div
+                    onClick={() => setUploadOpen(true)}
+                    className={`mx-2 flex h-8 w-40 cursor-pointer flex-row content-center rounded-md p-2 ${
+                      active ? "bg-gray-100" : ""
+                    }`}
+                  >
+                    <p className="leading-2 text-sm leading-4">
+                      Upload a video
+                    </p>
+                  </div>
+                )}
+              </Menu.Item>
+            </div>
+          </Menu.Items>
+        </Transition>
+      </Menu>
+    </>
+  );
+}

src/components/VideoRecordModal.tsx

@@ -3,16 +3,16 @@ import { Dialog, Transition } from "@headlessui/react";
 const Recorder = dynamic(() => import("~/components/Recorder"), { ssr: false });
 import dynamic from "next/dynamic";
 
-export default function VideoRecordModal() {
+interface Props {
-  const [isOpen, setIsOpen] = useState<boolean>(false);
+  open: boolean;
+  setOpen: (value: boolean) => void;
+}
+
+export default function VideoRecordModal({ open, setOpen }: Props) {
   const [step, setStep] = useState<"pre" | "in" | "post">("pre");
 
   function closeModal() {
-    setIsOpen(false);
+    setOpen(false);
-  }
-
-  function openModal() {
-    setIsOpen(true);
   }
 
   const handleClose = () => {
@@ -20,15 +20,7 @@ export default function VideoRecordModal() {
   };
 
   return (
-    <>
+    <Transition appear show={open} as={Fragment}>
-      <span
-        onClick={openModal}
-        className="cursor-pointer rounded border border-[#0000001a] px-2 py-2 text-sm text-[#292d34] hover:bg-[#fafbfc]"
-      >
-        New video
-      </span>
-
-      <Transition appear show={isOpen} as={Fragment}>
       <Dialog as="div" className="relative z-10" onClose={handleClose}>
         <div className="fixed inset-0 overflow-y-auto">
           <div className="flex min-h-full items-center justify-center p-4 text-center">
@@ -53,6 +45,5 @@ export default function VideoRecordModal() {
         </div>
       </Dialog>
     </Transition>
-    </>
   );
 }

src/components/VideoUploadModal.tsx

@@ -4,9 +4,13 @@ import { api } from "~/utils/api";
 import axios from "axios";
 import { useRouter } from "next/router";
 
-export default function VideoUploadModal() {
+interface Props {
+  open: boolean;
+  setOpen: (value: boolean) => void;
+}
+
+export default function VideoUploadModal({ open, setOpen }: Props) {
   const router = useRouter();
-  const [isOpen, setIsOpen] = useState<boolean>(false);
   const [submitting, setSubmitting] = useState<boolean>(false);
   const [file, setFile] = useState<File>();
   const getSignedUrl = api.video.getUploadUrl.useMutation();
@@ -19,11 +23,7 @@ export default function VideoUploadModal() {
   };
 
   function closeModal() {
-    setIsOpen(false);
+    setOpen(false);
-  }
-
-  function openModal() {
-    setIsOpen(true);
   }
 
   const handleSubmit = async (): Promise<void> => {
@@ -47,19 +47,11 @@ export default function VideoUploadModal() {
   };
 
   return (
-    <>
+    <Transition appear show={open} as={Fragment}>
-      <span
-        onClick={openModal}
-        className="cursor-pointer rounded border border-[#0000001a] px-2 py-2 text-sm text-[#292d34] hover:bg-[#fafbfc]"
-      >
-        New video
-      </span>
-
-      <Transition appear show={isOpen} as={Fragment}>
       <Dialog
         as="div"
         className="relative z-10"
-          onClose={() => void closeModal}
+        onClose={() => void closeModal()}
       >
         <div className="fixed inset-0 overflow-y-auto">
           <div className="flex min-h-full items-center justify-center p-4 text-center">
@@ -149,6 +141,5 @@ export default function VideoUploadModal() {
         </div>
       </Dialog>
     </Transition>
-    </>
   );
 }

src/pages/videos.tsx

@@ -9,7 +9,7 @@ import Image from "next/image";
 import { getTime } from "~/utils/getTime";
 import Checkout from "~/components/Checkout";
 import ProfileMenu from "~/components/ProfileMenu";
-import VideoRecordModal from "~/components/VideoRecordModal";
+import NewVideoMenu from "~/components/NewVideoMenu";
 
 const VideoList: NextPage = () => {
   const router = useRouter();
@@ -34,7 +34,7 @@ const VideoList: NextPage = () => {
             {["active", "past_due"].includes(
               session?.user.stripeSubscriptionStatus ?? ""
             ) ? (
-              <VideoRecordModal />
+              <NewVideoMenu />
             ) : null}
             {status === "authenticated" && (
               <div className="ml-4 flex items-center justify-center">