diff --git a/package-lock.json b/package-lock.json
index 8d732e2..f8e6209 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index d962423..f4c9c9d 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/VideoMoreMenu.tsx b/src/components/VideoMoreMenu.tsx
new file mode 100644
index 0000000..bc2250c
--- /dev/null
+++ b/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: