admin-aaw/snapify-authentik
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

add more options button

Browse source
This commit is contained in:
MarconLP 2023-04-14 18:44:15 +02:00
parent ec0f803c7d
commit 99ad695bd0
No known key found for this signature in database
GPG key ID: A08A9C8B623F5EA5
4 changed files with 96 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
package-lock.json generated
View file

@ -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",

1
package.json
View file

@ -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",

75
src/components/VideoMoreMenu.tsx Normal file
View file

@ -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>
);
}

6
src/pages/share/[videoId].tsx
View file

@ -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