From 7589a58699c3cb1c7a3068ee8106064af1ac49b2 Mon Sep 17 00:00:00 2001
From: Githmi Hashara <pdghashara@std.appsc.sab.ac.lk>
Date: Fri, 13 Sep 2024 18:41:30 +0530
Subject: [PATCH] Refactor CountrySelect component to remove unused imports and
 clean up code

---
 app/components/inputs/CountrySelect.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/components/inputs/CountrySelect.tsx b/app/components/inputs/CountrySelect.tsx
index 1217523..3361221 100644
--- a/app/components/inputs/CountrySelect.tsx
+++ b/app/components/inputs/CountrySelect.tsx
@@ -1,10 +1,8 @@
-
-
 'use client'
 
 import Select from 'react-select'
 import useCountries from '@/app/hooks/useCountries'
-
+import Image from 'next/image'
 
 export type CountrySelectValue = {
   flag: string
@@ -33,10 +31,12 @@ const CountrySelect: React.FC<CountrySelectProps> = ({ value, onChange }) => {
         formatOptionLabel={(option: any) => (
           <div className="flex flex-row items-center gap-3">
             {option.flag && (
-              <img
+              <Image
                 src={option.flag}
                 alt={`${option.label} flag`}
-                style={{ width: '20px', height: '15px', borderRadius: '2px' }}
+                width={20}
+                height={15}
+                style={{ borderRadius: '2px' }}
               />
             )}
             <div>
@@ -57,8 +57,8 @@ const CountrySelect: React.FC<CountrySelectProps> = ({ value, onChange }) => {
           borderRadius: 6,
           colors: {
             ...theme.colors,
-            primary: '#fcd75f', //if want give black
-            primary25: '#fef3c7', // light yellow for hover ( rose colour is #ffe4e6)
+            primary: '#fcd75f', // if want give black
+            primary25: '#fef3c7', // light yellow for hover (rose colour is #ffe4e6)
           },
         })}
       />