feat: enhance ChangeAPI and ChangePreferences components; add "API key update" functionality and save preferences feature

frontend/src/components/WeatherData.tsx

@@ -19,7 +19,25 @@ const WeatherData: React.FC = () => {
           {weatherData?.name}
         </h2>
         <p className="text-5xl font-extrabold mb-2 text-blue-900">
-          {weatherData?.main?.temp} °C
+          {weatherData?.main?.temp}{" "}
+          {localStorage.getItem("unit") === "metric"
+            ? "°C"
+            : localStorage.getItem("unit") === "imperial"
+            ? "°F"
+            : "K"}
+        </p>
+        <p className="flex items-center justify-center gap-2">
+          {weatherData?.sys?.country && (
+            <>
+              <img
+                src={`https://flagcdn.com/${weatherData.sys.country.toLowerCase()}.svg`}
+                alt={weatherData.sys.country}
+                width={24}
+                height={18}
+              />
+              <span>{weatherData.sys.country}</span>
+            </>
+          )}
         </p>
         <p className="text-lg mb-4 capitalize text-blue-600">
           {weatherData?.weather?.[0]?.description}