add sharing modal
This commit is contained in:
MarconLP
parent
c603e48060
commit
fcb3ecbb14
3 changed files with 126 additions and 4 deletions
25
src/components/ModernSwitch.tsx
Normal file
25
src/components/ModernSwitch.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import { Switch } from "@headlessui/react";
|
||||
|
||||
interface Props {
|
||||
enabled: boolean;
|
||||
toggle: () => void;
|
||||
}
|
||||
|
||||
export function ModernSwitch({ enabled, toggle }: Props) {
|
||||
return (
|
||||
<Switch
|
||||
checked={enabled}
|
||||
onChange={toggle}
|
||||
className={`${
|
||||
enabled ? "bg-[#4169e1]" : "bg-gray-200"
|
||||
} relative inline-flex h-3.5 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out`}
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={`${
|
||||
enabled ? "translate-x-2.5" : "translate-x-0"
|
||||
} pointer-events-none inline-block h-2.5 w-2.5 transform rounded-full bg-white shadow transition duration-200 ease-in-out`}
|
||||
/>
|
||||
</Switch>
|
||||
);
|
||||
}
|
||||
98
src/components/ShareModal.tsx
Normal file
98
src/components/ShareModal.tsx
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
import { Dialog, Switch, Transition } from "@headlessui/react";
|
||||
import { Fragment, useState } from "react";
|
||||
import { ModernSwitch } from "~/components/ModernSwitch";
|
||||
|
||||
export function ShareModal() {
|
||||
const [open, setOpen] = useState<boolean>(false);
|
||||
|
||||
const [sharing, setSharing] = useState<boolean>(false);
|
||||
const [es, sses] = useState<boolean>(false);
|
||||
const [as, ssgs] = useState<boolean>(false);
|
||||
|
||||
const [s, ss] = useState<boolean>(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<span
|
||||
onClick={() => setOpen(true)}
|
||||
className="cursor-pointer rounded border border-[#0000001a] px-2 py-2 text-sm text-[#292d34] hover:bg-[#fafbfc]"
|
||||
>
|
||||
Share
|
||||
</span>
|
||||
|
||||
<Transition appear show={open} as={Fragment}>
|
||||
<Dialog
|
||||
as="div"
|
||||
className="relative z-10"
|
||||
onClose={() => setOpen(false)}
|
||||
>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-black bg-opacity-25" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center p-4 text-center">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded bg-white p-6 text-left align-middle text-[#292D34] shadow-xl transition-all">
|
||||
<div className="flex flex-col items-start">
|
||||
<span className="text-lg font-medium">
|
||||
Share this recording
|
||||
</span>
|
||||
<div className="mt-6 flex w-full items-center justify-between">
|
||||
<span className="text-sm font-medium">
|
||||
Share link with anyone
|
||||
</span>
|
||||
<ModernSwitch enabled={s} toggle={ss} />
|
||||
</div>
|
||||
<button className="my-2 h-8 w-full rounded-md bg-[#4169e1] text-sm font-medium text-white hover:bg-[#224fd7]">
|
||||
Copy public link
|
||||
</button>
|
||||
<div className="w-full border border-solid border-[#e9ebf0] bg-[#fafbfc] px-[15px] py-3 text-xs">
|
||||
<div className="flex h-6 items-center justify-between">
|
||||
<span>Expire link</span>
|
||||
|
||||
<button className="h-6 rounded border border-solid border-[#d5d9df] bg-white px-[7px]">
|
||||
Never expire
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-3 flex h-6 items-center justify-between">
|
||||
<span>Delete video when expired</span>
|
||||
<ModernSwitch enabled={s} toggle={ss} />
|
||||
</div>
|
||||
<div className="mt-3 flex h-6 items-center justify-between">
|
||||
<span>Share link with search engines</span>
|
||||
<ModernSwitch enabled={s} toggle={ss} />
|
||||
</div>
|
||||
<div className="mt-3 flex h-6 items-center justify-between">
|
||||
<span>Embed code</span>
|
||||
<button className="h-6 rounded border border-solid border-[#d5d9df] bg-white px-[7px]">
|
||||
Copy code
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -7,6 +7,7 @@ import { useRouter } from "next/router";
|
|||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { getTime } from "~/utils/getTime";
|
||||
import { ShareModal } from "~/components/ShareModal";
|
||||
|
||||
const VideoList: NextPage = () => {
|
||||
const router = useRouter();
|
||||
|
|
@ -49,13 +50,11 @@ const VideoList: NextPage = () => {
|
|||
Personal Library
|
||||
</span>
|
||||
</Link>
|
||||
<span className="cursor-pointer rounded border border-[#0000001a] px-2 py-2 text-sm text-[#292d34] hover:bg-[#fafbfc]">
|
||||
Share
|
||||
</span>
|
||||
<ShareModal />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex h-full w-full grow flex-col items-center justify-start overflow-auto bg-[#fbfbfb]">
|
||||
<div className="flex aspect-video max-h-[627px] 2xl:max-h-[1160px] w-full justify-center bg-black">
|
||||
<div className="flex aspect-video max-h-[627px] w-full justify-center bg-black 2xl:max-h-[1160px]">
|
||||
{video?.video?.video_url && (
|
||||
<ReactPlayer
|
||||
width="100%"
|
||||
|
|
|
|||
Loading…
Reference in a new issue