107 lines
3.5 KiB
TypeScript
107 lines
3.5 KiB
TypeScript
import { useEffect, useRef, useState } from "react";
|
|
import { AnimatePresence, motion } from "framer-motion";
|
|
|
|
interface Country {
|
|
code: string;
|
|
iso: string;
|
|
label: string;
|
|
}
|
|
|
|
const COUNTRIES: Country[] = [
|
|
{ code: "+351", iso: "pt", label: "Portugal" },
|
|
{ code: "+34", iso: "es", label: "Spain" },
|
|
{ code: "+33", iso: "fr", label: "France" },
|
|
{ code: "+44", iso: "gb", label: "United Kingdom" },
|
|
{ code: "+1", iso: "us", label: "United States" },
|
|
{ code: "+55", iso: "br", label: "Brazil" },
|
|
];
|
|
|
|
const flagUrl = (iso: string) => `https://flagcdn.com/${iso}.svg`;
|
|
|
|
interface Props {
|
|
value: string;
|
|
onChange: (code: string) => void;
|
|
}
|
|
|
|
const PhoneCodeSelect = ({ value, onChange }: Props) => {
|
|
const [open, setOpen] = useState(false);
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const active = COUNTRIES.find((c) => c.code === value) ?? COUNTRIES[0];
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
const handlePointerDown = (e: MouseEvent) => {
|
|
if (
|
|
containerRef.current &&
|
|
!containerRef.current.contains(e.target as Node)
|
|
) {
|
|
setOpen(false);
|
|
}
|
|
};
|
|
document.addEventListener("mousedown", handlePointerDown);
|
|
return () => document.removeEventListener("mousedown", handlePointerDown);
|
|
}, [open]);
|
|
|
|
return (
|
|
<div className="relative" ref={containerRef}>
|
|
<input type="hidden" name="phone_code" value={active.code} />
|
|
<motion.button
|
|
type="button"
|
|
className="flex items-center gap-1.5 outline-none"
|
|
onClick={() => setOpen((o) => !o)}
|
|
whileTap={{ scale: 0.95 }}
|
|
transition={{ type: "spring", stiffness: 500, damping: 30 }}
|
|
aria-label="Country code"
|
|
>
|
|
<img
|
|
src={flagUrl(active.iso)}
|
|
alt={active.label}
|
|
className="w-5 h-[14px] rounded-[2px] object-cover shrink-0"
|
|
/>
|
|
<span className="text-sm md:text-base text-white font-medium leading-none">
|
|
{active.code}
|
|
</span>
|
|
</motion.button>
|
|
|
|
<AnimatePresence>
|
|
{open && (
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.95, y: -6 }}
|
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
|
exit={{ opacity: 0, scale: 0.95, y: -6 }}
|
|
transition={{ type: "spring", damping: 24, stiffness: 300 }}
|
|
style={{ transformOrigin: "top left" }}
|
|
className="absolute left-0 top-full mt-2 w-48 rounded-xl glass-panel shadow-glass-lg overflow-hidden z-20"
|
|
>
|
|
{COUNTRIES.map((country) => (
|
|
<button
|
|
key={country.code}
|
|
type="button"
|
|
onClick={() => {
|
|
onChange(country.code);
|
|
setOpen(false);
|
|
}}
|
|
className={`flex w-full items-center gap-2 px-3 py-2 text-sm text-left transition-colors ${
|
|
country.code === active.code
|
|
? "text-gold-light bg-white/5"
|
|
: "text-white/70 hover:bg-white/5 hover:text-white"
|
|
}`}
|
|
>
|
|
<img
|
|
src={flagUrl(country.iso)}
|
|
alt={country.label}
|
|
className="w-5 h-[14px] rounded-[2px] object-cover shrink-0"
|
|
/>
|
|
<span className="flex-1">{country.label}</span>
|
|
<span className="text-white/40">{country.code}</span>
|
|
</button>
|
|
))}
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PhoneCodeSelect;
|