started working on favorites

weather-ui/src/app/_components/Metars/MetarDialog.tsx

@@ -1,7 +1,12 @@
+'use client';
+
 import { Airport } from '@/app/_api/airport.types';
 import { Metar } from '@/app/_api/metar.types';
 import { FaArrowsSpin, FaLocationArrow } from 'react-icons/fa6';
 import { Modal } from 'antd';
+import Link from 'next/link';
+import { AiFillStar, AiOutlineStar } from 'react-icons/ai';
+import { useState } from 'react';
 
 interface MetarDialogProps {
   airport: Airport;
@@ -10,6 +15,12 @@ interface MetarDialogProps {
 }
 
 export default function MetarDialog({ airport, isOpen, onClose }: MetarDialogProps) {
+  const [isFavorite, setIsFavorite] = useState(false);
+
+  function handleFavorite(value: boolean) {
+    setIsFavorite(value);
+  }
+
   function metarBGColor(metar: Metar | undefined) {
     if (metar?.flight_category == 'VFR') {
       return 'bg-emerald-600';
@@ -34,13 +45,41 @@ export default function MetarDialog({ airport, isOpen, onClose }: MetarDialogPro
     }
   }
   return (
-    <Modal title={`${airport.icao} ${airport.full_name}`} open={isOpen} onCancel={onClose} closable={false} footer={[]}>
-      <div className='min-w-0 flex-1 select-none'>
+    <Modal
+      title={
+        <span className='flex justify-between'>
+          <Link href={`/airport/${airport.icao}`}>
+            {airport.icao} {airport.full_name}
+          </Link>
+          {isFavorite ? (
+            <AiFillStar
+              size={24}
+              className='cursor-pointer text-blue-500 hover:text-blue-400'
+              onClick={() => handleFavorite(false)}
+            />
+          ) : (
+            <AiOutlineStar
+              size={24}
+              className='cursor-pointer text-blue-500 hover:text-blue-400'
+              onClick={() => handleFavorite(true)}
+            />
+          )}
+        </span>
+      }
+      open={isOpen}
+      onCancel={onClose}
+      closable={false}
+      footer={[]}
+      className='select-none'
+    >
+      <div className='min-w-0 flex-1'>
         <hr />
         <p className='text-sm font-medium text-gray-500'>{airport.metar?.raw_text}</p>
         <div className='mt-2 flex'>
           <span
-            className={`flex inline-block text-sm text-white ${metarBGColor(airport.metar)} py-2 px-4 rounded-full`}
+            className={`flex inline-block align-middle text-sm text-white py-2 px-4 rounded-full 
+              ${metarBGColor(airport.metar)}
+            `}
           >
             {airport.metar?.flight_category ? airport.metar?.flight_category : 'UNKN'}
           </span>