Working on sky conditions display:

ui/src/app/airport/[icao]/page.tsx

@@ -2,16 +2,23 @@
 
 import { getAirport } from '@/api/airport';
 import { Airport } from '@/api/airport.types';
-import Link from 'next/link';
+import { getMetars } from '@/api/metar';
+import { Metar } from '@/api/metar.types';
+import SkyConditions from '@/components/Metars/SkyConditions';
 import { useEffect, useState } from 'react';
 
 export default function Page({ params }: { params: { icao: string } }) {
   const [airport, setAirport] = useState<Airport | undefined>(undefined);
+  const [metar, setMetar] = useState<Metar | undefined>(undefined);
 
   useEffect(() => {
     async function loadAirport() {
-      const { data: airport } = await getAirport({ icao: params.icao });
-      setAirport(airport);
+      const { data: airportData } = await getAirport({ icao: params.icao });
+      setAirport(airportData);
+      const { data: metarData } = await getMetars([airportData.icao]);
+      if (metarData.length > 0) {
+        setMetar(metarData[0]);
+      }
     }
     loadAirport();
   }, []);
@@ -21,7 +28,7 @@ export default function Page({ params }: { params: { icao: string } }) {
       <>
         <div className=''>
           <h3 className=''>{airport.full_name}</h3>
-          <Link href={'/'}>Back</Link>
+          {metar && <SkyConditions metar={metar} />}
         </div>
       </>
     );