| 1 |
/** |
| 2 |
* Renders a stored phone value as flag + readable number in admin views. |
| 3 |
* International values ("+9779806015400") show the detected country flag and a |
| 4 |
* spaced "+977 9806015400"; legacy national-only values render as plain text |
| 5 |
* with no flag (never reinterpreted). |
| 6 |
*/ |
| 7 |
import React from "react"; |
| 8 |
import { detectPhoneCountry, flagUrl, formatPhone } from "../../lib/phone"; |
| 9 |
|
| 10 |
interface PhoneDisplayProps { |
| 11 |
value?: string | null; |
| 12 |
className?: string; |
| 13 |
} |
| 14 |
|
| 15 |
export const PhoneDisplay: React.FC<PhoneDisplayProps> = ({ |
| 16 |
value, |
| 17 |
className, |
| 18 |
}) => { |
| 19 |
const raw = (value || "").trim(); |
| 20 |
if (!raw) return null; |
| 21 |
|
| 22 |
const detected = detectPhoneCountry(raw); |
| 23 |
const url = detected ? flagUrl(detected.iso) : ""; |
| 24 |
|
| 25 |
return ( |
| 26 |
<span |
| 27 |
className={className} |
| 28 |
style={{ display: "inline-flex", alignItems: "center", gap: 6 }} |
| 29 |
> |
| 30 |
{url && ( |
| 31 |
<img |
| 32 |
src={url} |
| 33 |
alt={detected ? detected.iso : ""} |
| 34 |
width={18} |
| 35 |
height={13} |
| 36 |
loading="lazy" |
| 37 |
style={{ |
| 38 |
borderRadius: 2, |
| 39 |
objectFit: "cover", |
| 40 |
boxShadow: "0 0 0 1px rgba(0,0,0,0.08)", |
| 41 |
flex: "0 0 auto", |
| 42 |
}} |
| 43 |
/> |
| 44 |
)} |
| 45 |
<span>{detected ? formatPhone(raw) : raw}</span> |
| 46 |
</span> |
| 47 |
); |
| 48 |
}; |
| 49 |
|
| 50 |
export default PhoneDisplay; |
| 51 |
|
