diff --git a/src/frontend/src/features/rooms/components/InviteDialog.tsx b/src/frontend/src/features/rooms/components/InviteDialog.tsx index 520468fa..2006586f 100644 --- a/src/frontend/src/features/rooms/components/InviteDialog.tsx +++ b/src/frontend/src/features/rooms/components/InviteDialog.tsx @@ -4,7 +4,13 @@ import { Div, Button, type DialogProps, P } from '@/primitives' import { HStack, styled, VStack } from '@/styled-system/jsx' import { Heading, Dialog } from 'react-aria-components' import { Text, text } from '@/primitives/Text' -import { RiCloseLine, RiFileCopyLine, RiSpam2Fill } from '@remixicon/react' +import { + RiCheckLine, + RiCloseLine, + RiFileCopyLine, + RiSpam2Fill, +} from '@remixicon/react' +import { useEffect, useState } from 'react' // fixme - extract in a proper primitive this dialog without overlay const StyledRACDialog = styled(Dialog, { @@ -34,17 +40,25 @@ export const InviteDialog = ({ const { t } = useTranslation('rooms') const roomUrl = getRouteUrl('room', roomId) + const [isCopied, setIsCopied] = useState(false) + + useEffect(() => { + if (isCopied) { + const timeout = setTimeout(() => setIsCopied(false), 3000) + return () => clearTimeout(timeout) + } + }, [isCopied]) + + const [isHovered, setIsHovered] = useState(false) + return ( {({ close }) => ( {t('shareDialog.heading')} @@ -63,36 +77,48 @@ export const InviteDialog = ({

{t('shareDialog.description')}

- { + navigator.clipboard.writeText(roomUrl) + setIsCopied(true) + }} + onHoverChange={setIsHovered} > -
- {roomUrl.replace(/^https?:\/\//, '')} -
- -
+ {isCopied ? ( + <> + + {t('shareDialog.copied')} + + ) : ( + <> + + {isHovered ? ( + t('shareDialog.copy') + ) : ( +
+ {roomUrl.replace(/^https?:\/\//, '')} +
+ )} + + )} +