Improved the Country selector

src/components/DemographicInformationInput.tsx

@@ -9,6 +9,7 @@ import {BsArrowRepeat} from "react-icons/bs";
 import axios from "axios";
 import {toast} from "react-toastify";
 import {KeyedMutator} from "swr";
+import CountrySelect from "./Low/CountrySelect";
 
 interface Props {
 	mutateUser: KeyedMutator<User>;
@@ -54,22 +55,7 @@ export default function DemographicInformationInput({mutateUser}: Props) {
 			<form className="flex flex-col items-center justify-items-center gap-6 w-full h-full -lg:px-8 lg:w-1/2 mb-32" onSubmit={save}>
 				<div className="relative flex flex-col gap-3 w-full">
 					<label className="font-normal text-base text-mti-gray-dim">Country *</label>
-					<select
-						name="country"
-						className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
-						onChange={(e) => {
-							setCountry(e.target.value);
-						}}
-						defaultValue={country}>
-						<option value={undefined} disabled selected>
-							Select a country
-						</option>
-						{countryCodes.all().map((x) => (
-							<option key={x.countryCode} value={x.countryCode}>
-								{x.flag} {x.countryNameLocal}
-							</option>
-						))}
-					</select>
+					<CountrySelect value={country} onChange={setCountry} />
 				</div>
 				<Input type="tel" name="phone" label="Phone number" onChange={(e) => setPhone(e)} placeholder="Enter phone number" required />
 				<div className="relative flex flex-col gap-3 w-full">