addwin/reservation-front
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

perf: the support modal fixed

Browse source
This commit is contained in:
Afra ‌ 2026-07-25 11:28:38 +03:30
parent 434b5b5235
commit ae70edf99b
1 changed files with 51 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
src/components/SupportButton.tsx
View file

@ -1,42 +1,45 @@
import { useState } from 'react'
import { createPortal } from 'react-dom'
import Icon from './Icon'
import { useState } from "react";
import { createPortal } from "react-dom";
import Icon from "./Icon";
const SUPPORT_PHONE = '02111111111'
const SUPPORT_PHONE_DISPLAY = '۰۲۱-۱۱۱۱۱۱۱۱'
const SUPPORT_PHONE = "02111111111";
const SUPPORT_PHONE_DISPLAY = "۰۲۱-۱۱۱۱۱۱۱۱";
function isMobileDevice() {
return 'ontouchstart' in window || navigator.maxTouchPoints > 0
return "ontouchstart" in window || navigator.maxTouchPoints > 0;
}
export default function SupportButton({ className }: { className?: string }) {
const [open, setOpen] = useState(false)
const [copied, setCopied] = useState(false)
const [open, setOpen] = useState(false);
const [copied, setCopied] = useState(false);
const handleClick = () => {
if (isMobileDevice()) {
window.location.href = `tel:${SUPPORT_PHONE}`
} else {
setOpen(true)
}
setOpen(true);
}
};
const handleCopy = async () => {
try {
await navigator.clipboard.writeText(SUPPORT_PHONE)
setCopied(true)
setTimeout(() => setCopied(false), 2000)
await navigator.clipboard.writeText(SUPPORT_PHONE);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch {
// silent fallback
}
}
};
return (
<>
<button
type="button"
onClick={handleClick}
className={className ?? 'rounded-full bg-[#223D5D] px-5 py-3 font-semibold text-white'}
className={
className ??
"rounded-full bg-[#223D5D] px-5 py-3 font-semibold text-white"
}
>
پشتیبانی
</button>
@ -44,17 +47,23 @@ export default function SupportButton({ className }: { className?: string }) {
{open &&
createPortal(
<>
<div className="fixed inset-0 z-9998" onClick={() => setOpen(false)} />
<div className="fixed inset-x-4 top-20 z-9999 rounded-2xl bg-white px-5 py-4 shadow-xl sm:inset-x-auto sm:left-1/2 sm:w-96 sm:-translate-x-1/2">
<button
type="button"
<div
className="fixed inset-0 z-9998 bg-black/40"
onClick={() => setOpen(false)}
className="absolute left-4 top-4 flex h-7 w-7 items-center justify-center text-gray-400 hover:text-gray-600"
aria-label="بستن"
/>
<div
dir="rtl"
className="fixed inset-x-6 top-1/2 z-9999 -translate-y-1/2 rounded-2xl bg-white px-5 shadow-xl"
style={{ height: "72px" }}
>
✕
</button>
<div className="flex items-center justify-end gap-3 pt-1">
<div className="flex h-full items-center justify-start gap-3">
<p className="text-right text-gray-900">
{copied ? (
"کپی شد!"
) : (
<div className="flex items-center gap-2">
شماره تماس پشتیبانی:{" "}
<span dir="ltr">{SUPPORT_PHONE_DISPLAY}</span>
<button
type="button"
onClick={handleCopy}
@ -63,14 +72,22 @@ export default function SupportButton({ className }: { className?: string }) {
>
<Icon name="copy" className="h-5 w-5" />
</button>
<p dir="ltr" className="text-right text-gray-900">
{copied ? 'کپی شد!' : `شماره تماس پشتیبانی: ${SUPPORT_PHONE_DISPLAY}`}
</div>
)}
</p>
<button
type="button"
onClick={() => setOpen(false)}
className="absolute left-3 top-1/3 -translate-y-1/2 text-black hover:text-gray-600"
aria-label="بستن"
>
✕
</button>
</div>
</div>
</>,
document.body,
)}
</>
)
);
}