Fixed some styling issues, fixed icons

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

@@ -1,14 +1,31 @@
-import { getAirport } from '@/api/airport';
-import Link from 'next/link';
+'use client';
 
-export default async function Page({ params }: { params: { icao: string } }) {
-  const { data: airport } = await getAirport({ icao: params.icao });
-  return (
-    <>
-      <div className=''>
-        <h3 className=''>{airport.full_name}</h3>
-        <Link href={'/'}>Back</Link>
-      </div>
-    </>
-  );
+import { getAirport } from '@/api/airport';
+import { Airport } from '@/api/airport.types';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+
+export default function Page({ params }: { params: { icao: string } }) {
+  const [airport, setAirport] = useState<Airport | undefined>(undefined);
+
+  useEffect(() => {
+    async function loadAirport() {
+      const { data: airport } = await getAirport({ icao: params.icao });
+      setAirport(airport);
+    }
+    loadAirport();
+  }, []);
+
+  if (airport) {
+    return (
+      <>
+        <div className=''>
+          <h3 className=''>{airport.full_name}</h3>
+          <Link href={'/'}>Back</Link>
+        </div>
+      </>
+    );
+  } else {
+    return <></>;
+  }
 }

ui/src/app/page.tsx

@@ -3,4 +3,5 @@ import Metar from '@/components/Metars';
 
 export default function Page() {
   return <Metar />;
+  // return <></>;
 }