add more options button

package-lock.json

@@ -15,6 +15,7 @@
         "@next-auth/prisma-adapter": "^1.0.5",
         "@popperjs/core": "^2.11.7",
         "@prisma/client": "^4.11.0",
+        "@radix-ui/react-icons": "^1.3.0",
         "@tanstack/react-query": "^4.28.0",
         "@trpc/client": "^10.18.0",
         "@trpc/next": "^10.18.0",
@@ -1798,6 +1799,14 @@
       "resolved": "https://registry.npmjs.org/@prisma/engines-version/-/engines-version-4.12.0-67.659ef412370fa3b41cd7bf6e94587c1dfb7f67e7.tgz",
       "integrity": "sha512-JIHNj5jlXb9mcaJwakM0vpgRYJIAurxTUqM0iX0tfEQA5XLZ9ONkIckkhuAKdAzocZ+80GYg7QSsfpjg7OxbOA=="
     },
+    "node_modules/@radix-ui/react-icons": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz",
+      "integrity": "sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==",
+      "peerDependencies": {
+        "react": "^16.x || ^17.x || ^18.x"
+      }
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz",
@@ -7713,6 +7722,12 @@
       "resolved": "https://registry.npmjs.org/@prisma/engines-version/-/engines-version-4.12.0-67.659ef412370fa3b41cd7bf6e94587c1dfb7f67e7.tgz",
       "integrity": "sha512-JIHNj5jlXb9mcaJwakM0vpgRYJIAurxTUqM0iX0tfEQA5XLZ9ONkIckkhuAKdAzocZ+80GYg7QSsfpjg7OxbOA=="
     },
+    "@radix-ui/react-icons": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz",
+      "integrity": "sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==",
+      "requires": {}
+    },
     "@rushstack/eslint-patch": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz",

package.json

@@ -16,6 +16,7 @@
     "@next-auth/prisma-adapter": "^1.0.5",
     "@popperjs/core": "^2.11.7",
     "@prisma/client": "^4.11.0",
+    "@radix-ui/react-icons": "^1.3.0",
     "@tanstack/react-query": "^4.28.0",
     "@trpc/client": "^10.18.0",
     "@trpc/next": "^10.18.0",

src/components/VideoMoreMenu.tsx

@@ -0,0 +1,75 @@
+import { type RouterOutputs } from "~/utils/api";
+import { Menu, Popover, Transition } from "@headlessui/react";
+import { Fragment, useState } from "react";
+import {
+  DotsHorizontalIcon,
+  DownloadIcon,
+  Pencil1Icon,
+  TrashIcon,
+} from "@radix-ui/react-icons";
+
+interface Props {
+  video: RouterOutputs["video"]["get"];
+}
+
+export default function VideoMoreMenu({ video }: Props) {
+  const [open, setOpen] = useState(null);
+
+  const items = [
+    {
+      name: "Rename",
+      icon: <Pencil1Icon />,
+    },
+    {
+      name: "Download",
+      icon: <DownloadIcon />,
+    },
+    {
+      name: "Delete",
+      icon: <TrashIcon />,
+      props: { onClick: () => console.log("test") },
+    },
+  ];
+
+  return (
+    <Menu as="div" className="relative mr-4 inline-block text-left">
+      <div>
+        <Menu.Button className="inline-flex h-full w-full justify-center rounded-full px-4 py-2 text-sm font-medium text-black text-white hover:bg-[#fafbfc] focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
+          <DotsHorizontalIcon />
+        </Menu.Button>
+      </div>
+      <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-20 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 ">
+            {items.map((item) => (
+              <div className="h-8" key={item.name} {...item.props}>
+                <Menu.Item>
+                  {({ active }) => (
+                    <div
+                      className={`mx-2 flex h-8 w-40 cursor-pointer flex-row content-center rounded-md p-2 ${
+                        active ? "bg-gray-100" : ""
+                      }`}
+                    >
+                      <div className="mr-2 flex w-4 content-center justify-center">
+                        {item.icon}
+                      </div>
+                      <p className="leading-2 text-sm leading-4">{item.name}</p>
+                    </div>
+                  )}
+                </Menu.Item>
+              </div>
+            ))}
+          </div>
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+}

src/pages/share/[videoId].tsx

@@ -9,6 +9,7 @@ import Image from "next/image";
 import { getTime } from "~/utils/getTime";
 import { ShareModal } from "~/components/ShareModal";
 import { useSession } from "next-auth/react";
+import VideoMoreMenu from "~/components/VideoMoreMenu";
 
 const VideoList: NextPage = () => {
   const router = useRouter();
@@ -46,7 +47,10 @@ const VideoList: NextPage = () => {
       <main className="flex h-screen w-screen flex-col items-center justify-center">
         <div className="flex min-h-[62px] w-full items-center justify-between border-b border-solid border-b-[#E7E9EB] bg-white px-6">
           <span>Screenity</span>
-          <div>
+          <div className="flex items-center justify-center">
+            {video && video.userId === session?.user.id ? (
+              <VideoMoreMenu video={video} />
+            ) : null}
             <Link href="/videos">
               <span className="cursor-pointer rounded border border-[#0000001a] px-2 py-2 text-sm text-[#292d34] hover:bg-[#fafbfc]">
                 Personal Library