feat: add visual feedback for copy buttons in ShareCard
Add check icon feedback when copying RoomID and URL to clipboard: - RoomID copy button now shows check icon for 2 seconds after copy - URL copy button now shows check icon for 2 seconds after copy - Consistent with existing QR code copy button behavior
This commit is contained in:
@@ -22,6 +22,20 @@ const ShareCard: React.FC<ShareCardProps> = ({ RoomID, shareLink }) => {
|
||||
const t = useTranslations("text.retrieveMethod");
|
||||
const qrRef = useRef<HTMLDivElement>(null);
|
||||
const [isCopied, setIsCopied] = useState<boolean>(false);
|
||||
const [isRoomIdCopied, setIsRoomIdCopied] = useState<boolean>(false);
|
||||
const [isUrlCopied, setIsUrlCopied] = useState<boolean>(false);
|
||||
|
||||
const copyRoomId = async () => {
|
||||
await navigator.clipboard.writeText(RoomID);
|
||||
setIsRoomIdCopied(true);
|
||||
setTimeout(() => setIsRoomIdCopied(false), 2000);
|
||||
};
|
||||
|
||||
const copyUrl = async () => {
|
||||
await navigator.clipboard.writeText(shareLink);
|
||||
setIsUrlCopied(true);
|
||||
setTimeout(() => setIsUrlCopied(false), 2000);
|
||||
};
|
||||
|
||||
const copyToClipboard = async () => {
|
||||
if (!qrRef.current) return;
|
||||
@@ -119,10 +133,14 @@ const ShareCard: React.FC<ShareCardProps> = ({ RoomID, shareLink }) => {
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => navigator.clipboard.writeText(RoomID)}
|
||||
onClick={copyRoomId}
|
||||
title={t("copyRoomId")}
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
{isRoomIdCopied ? (
|
||||
<Check className="h-4 w-4" />
|
||||
) : (
|
||||
<Copy className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -133,10 +151,14 @@ const ShareCard: React.FC<ShareCardProps> = ({ RoomID, shareLink }) => {
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => navigator.clipboard.writeText(shareLink)}
|
||||
onClick={copyUrl}
|
||||
title={t("copyUrl")}
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
{isUrlCopied ? (
|
||||
<Check className="h-4 w-4" />
|
||||
) : (
|
||||
<Copy className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user