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: , + }, + { + name: "Download", + icon: , + }, + { + name: "Delete", + icon: , + props: { onClick: () => console.log("test") }, + }, + ]; + + return ( + +
+ + + +
+ + +
+ {items.map((item) => ( +
+ + {({ active }) => ( +
+
+ {item.icon} +
+

{item.name}

+
+ )} +
+
+ ))} +
+
+
+
+ ); +} diff --git a/src/pages/share/[videoId].tsx b/src/pages/share/[videoId].tsx index 4df0325..2c44c87 100644 --- a/src/pages/share/[videoId].tsx +++ b/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 = () => {
Screenity -
+
+ {video && video.userId === session?.user.id ? ( + + ) : null} Personal Library