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={[]}>
+    <Modal
-      <div className='min-w-0 flex-1 select-none'>
+      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>

weather-ui/src/app/_components/Topbar/index.tsx

@@ -1,9 +1,8 @@
 'use client';
 
-import { AutoComplete, Avatar, Modal } from 'antd';
+import { AutoComplete, Avatar } from 'antd';
 import Link from 'next/link';
-import { AiOutlineSearch, AiOutlineUser } from 'react-icons/ai';
+import { AiOutlineUser } from 'react-icons/ai';
-import { Button } from '@blueprintjs/core';
 import { useState } from 'react';
 import { getAirports } from '@/app/_api/airport';
 import { useRouter } from 'next/navigation';
@@ -11,7 +10,6 @@ import { useRouter } from 'next/navigation';
 const DEFAULT_ICON_SIZE = 40;
 
 export default function Topbar() {
-  const [modalOpen, setModalOpen] = useState(false);
   const [searchValue, setSearchValue] = useState('');
   const [airports, setAirports] = useState<{ key: string; value: string; label: string }[]>([]);
   const router = useRouter();
@@ -29,49 +27,28 @@ export default function Topbar() {
   }
 
   function onSelect(value: string) {
-    setModalOpen(false);
     setSearchValue('');
     router.push(`/airport/${value}`);
   }
 
-  function onClose() {
-    setModalOpen(false);
-    setSearchValue('');
-  }
-
   return (
     <>
-      <Modal
+      <nav className='w-screen flex bg-gray-700 text-gray-200 justify-between'>
-        open={modalOpen}
+        <div className='flex'>
-        closable={false}
+          <Link href={'/'} className='align-middle pt-2.5 px-6 text-lg'>
-        onCancel={onClose}
+            <span>Aviation Weather</span>
-        footer={[]}
+          </Link>
-        className='p-0'
-        title={'Search for Airports'}
-      >
           <AutoComplete
-          className='w-full'
+            className='w-72 relative top-2'
-          allowClear
             autoFocus
+            defaultActiveFirstOption
             value={searchValue}
             options={airports}
             onSelect={onSelect}
             onSearch={onSearch}
+            onBlur={() => setSearchValue('')}
             placeholder='Search Airports...'
           />
-      </Modal>
-      <nav className='w-screen flex bg-gray-700 text-gray-200 justify-between'>
-        <div className='flex'>
-          <Link href={'/'} className='align-middle pt-2.5 pl-6 text-lg'>
-            <span>Aviation Weather</span>
-          </Link>
-          <Button
-            icon={<AiOutlineSearch size={24} className='float-left mr-2 hover:text-white' />}
-            className='my-1 ml-6 pl-10 pr-12 border-none rounded-lg bg-gray-800 text-base text-gray-200/75 hover:bg-gray-600 hover:text-white cursor-pointer'
-            onClick={() => setModalOpen(true)}
-          >
-            Search Airports...
-          </Button>
         </div>
         <Link className='my-1 mr-2' href={'/profile'}>
           <Avatar shape='circle' size={DEFAULT_ICON_SIZE} icon={<AiOutlineUser />} />