Improved the Country selector

src/pages/profile.tsx

@@ -15,6 +15,8 @@ import {RadioGroup} from "@headlessui/react";
 import clsx from "clsx";
 import {EmploymentStatus, EMPLOYMENT_STATUS, Gender, User} from "@/interfaces/user";
 import countryCodes from "country-codes-list";
+import {countries, TCountries} from "countries-list";
+import CountrySelect from "@/components/Low/CountrySelect";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -186,22 +188,7 @@ export default function Home() {
 									<div className="flex flex-row gap-8 w-full">
 										<div className="flex flex-col gap-3 w-full">
 											<label className="font-normal text-base text-mti-gray-dim">Country *</label>
-											<select
-												name="country"
-												className="py-6 w-full px-8 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);
-												}}
-												value={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"