Updated the CountrySelect

src/components/Low/CountrySelect.tsx

@@ -2,6 +2,7 @@ import {countries, TCountries} from "countries-list";
 import {Fragment, useState} from "react";
 import {Combobox, Transition} from "@headlessui/react";
 import {BsChevronExpand} from "react-icons/bs";
+import countryCodes from "country-codes-list";
 
 interface Props {
 	value?: string;
@@ -10,7 +11,9 @@ interface Props {
 
 const mapCountries = (codes: string[]) => {
 	return codes.map((code) => ({
-		label: countries[code as unknown as keyof TCountries].name,
+		label: `${countryCodes.findOne("countryCode" as any, code).flag} ${countries[code as unknown as keyof TCountries].name} (+${
+			countries[code as unknown as keyof TCountries].phone
+		})`,
 		code,
 	}));
 };
@@ -35,7 +38,11 @@ export default function CountrySelect({value, onChange}: Props) {
 						<Combobox.Input
 							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) => setQuery(e.target.value)}
-							displayValue={(code: string) => countries[code as unknown as keyof TCountries].name}
+							displayValue={(code: string) => {
+								const country = countries[code as unknown as keyof TCountries];
+
+								return `${countryCodes.findOne("countryCode" as any, code).flag} ${country.name} (+${country.phone})`;
+							}}
 						/>
 						<Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-8">
 							<BsChevronExpand />

src/pages/(admin)/Lists/UserList.tsx

@@ -10,7 +10,7 @@ import clsx from "clsx";
 import {capitalize} from "lodash";
 import moment from "moment";
 import {Fragment, useState} from "react";
-import {BsCheck, BsCheckCircle, BsFillExclamationOctagonFill, BsPerson, BsStop, BsTrash} from "react-icons/bs";
+import {BsCheck, BsCheckCircle, BsFillExclamationOctagonFill, BsPerson, BsTrash} from "react-icons/bs";
 import {toast} from "react-toastify";
 import {countries, TCountries} from "countries-list";
 import countryCodes from "country-codes-list";

src/pages/profile.tsx

@@ -14,8 +14,6 @@ import {ErrorMessage} from "@/constants/errors";
 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";
 import {shouldRedirectHome} from "@/utils/navigation.disabled";
 import moment from "moment";