diff --git a/app/components/TimePopover.tsx b/app/components/TimePopover.tsx new file mode 100644 index 000000000..6affe59ff --- /dev/null +++ b/app/components/TimePopover.tsx @@ -0,0 +1,83 @@ +import { useRef, useState } from "react"; +import * as React from "react"; +import { Dialog } from "react-aria-components"; +import { Popover } from "react-aria-components"; +import { useTranslation } from "react-i18next"; +import { useCopyToClipboard } from "react-use"; +import { SendouButton } from "./elements/Button"; +import { CheckmarkIcon } from "./icons/Checkmark"; +import { ClipboardIcon } from "./icons/Clipboard"; + +export default function TimePopover({ + time, + options = { + minute: "numeric", + hour: "numeric", + day: "numeric", + month: "long", + }, +}: { + time: Date; + options?: Intl.DateTimeFormatOptions; +}) { + const { i18n } = useTranslation(); + + const [open, setOpen] = useState(false); + + const triggerRef = useRef(null); + + const { t } = useTranslation(["common"]); + + const [state, copyToClipboard] = useCopyToClipboard(); + const [copySuccess, setCopySuccess] = React.useState(false); + + React.useEffect(() => { + if (!state.value) return; + + setCopySuccess(true); + const timeout = setTimeout(() => setCopySuccess(false), 2000); + + return () => clearTimeout(timeout); + }, [state]); + + return ( +