updated slides, upgrade phone input with mask and country flag, started tablet etc

2024-09-04 13:26:23 +05:00
parent 60d54fe4e7
commit d1caddbde5
35 changed files with 769 additions and 701 deletions
@@ -0,0 +1,71 @@
+import countries from 'countries-phone-masks';
+import {
+  CountryCode,
+  getCountries,
+  getCountryCallingCode,
+} from 'libphonenumber-js';
+import { useRef, useState } from 'react';
+import { useOnClickOutside } from 'usehooks-ts';
+import { ChevronUpIcon } from './icons/ChevronUpIcon';
+import { ChevronDownIcon } from './icons/ChevronDownIcon';
+
+export function SelectPhoneCode({
+  currentPhoneCodeAndCountry: [currentPhoneCode, currentCountry],
+  onClick,
+}: {
+  currentPhoneCodeAndCountry: [string, CountryCode];
+  onClick: ([phoneCode, country]: [string, CountryCode]) => void;
+}) {
+  const [open, setOpen] = useState(false);
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  useOnClickOutside(ref, () => setOpen(false));
+
+  return (
+    <div ref={ref} className="relative flex flex-col w-1/3">
+      <button
+        className="flex gap-x-1 justify-between items-center relative"
+        onClick={e => {
+          e.preventDefault();
+          setOpen(prev => !prev);
+        }}
+      >
+        <img
+          src={countries.find(c => c.iso === currentCountry)?.flag}
+          className="w-6"
+          alt=""
+        />
+        <p className="h4">{currentPhoneCode}</p>
+        {open ? <ChevronUpIcon /> : <ChevronDownIcon />}
+      </button>
+      {open && (
+        <div className="space-y-1 absolute z-10 bg-[#14161F] top-[100%] -left-1 border border-t-0 rounded-b-lg border-[#3D425C] max-h-[300px] overflow-y-auto overflow-x-hidden">
+          {getCountries()
+            .map(country => [`+${getCountryCallingCode(country)}`, country])
+            .filter(
+              ([phonecode, country]) =>
+                phonecode !== currentPhoneCode || country !== currentCountry,
+            )
+            .map(([phoneCode, country]) => (
+              <div
+                key={country}
+                className="flex items-center gap-x-1 hover:bg-[#3D425C] px-1"
+                onClick={() => {
+                  onClick([phoneCode, country as CountryCode]);
+                  setOpen(false);
+                }}
+              >
+                <img
+                  src={countries.find(c => c.iso === country)?.flag}
+                  alt=""
+                  className="w-6"
+                />
+                <p className="flex-1 h4 cursor-pointer py-1">{phoneCode}</p>
+              </div>
+            ))}
+        </div>
+      )}
+    </div>
+  );
+}