feat(search-bar): implement search functionality

client/src/App.css

@@ -179,7 +179,7 @@ a {
   grid-template-rows: var(--top-bar-height) var(--dashboard-first-row-height) minmax(0, 1fr);
 }
 
-.dashboard > div {
+.dashboard > div:not(.search-bar-container) {
   padding: var(--padding);
   border-radius: var(--border-radius);
 }
@@ -189,17 +189,56 @@ a {
   font-size: 0.9rem;
 }
 
+.search-bar-container {
+  position: relative;
+  grid-area: searchbar;
+}
+
 .searchbar {
+  width: 100%;
   border: none;
+  height: 100%;
   color: #fff;
-  display: flex;
   font-weight: 300;
-  align-items: center;
-  grid-area: searchbar;
-  padding: 1.15rem 2rem;
   border-radius: 0.5rem;
-  justify-content: center;
-  background: rgba(0, 0, 0, 0.09) url('/src/search-icon.png') no-repeat left 3% center / 8%;
+  padding: 0.25rem 2.5rem;
+  background: rgba(0, 0, 0, 0.09) url('/search-icon.png') no-repeat left 3% center / 8%;
+}
+
+.search-bar-container > ul {
+  position: absolute;
+  display: none; 
+  z-index: 1;
+  top: 120%;
+  gap: 0.1rem;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  min-height: 100%;
+  flex-direction: column;
+  backdrop-filter: blur(10px);
+  background: rgba(0, 0, 0, 0.09);
+  border-radius: var(--border-radius);
+  -webkit-backdrop-filter: blur(10px);
+  box-shadow: 0 7px 29px 0 rgba(6, 14, 75, 0.5);
+}
+
+.search-bar-container ul li {
+  cursor: pointer;
+  overflow: hidden;
+  text-wrap: nowrap;
+  font-weight: 300;
+  font-size: 0.9rem;
+  padding: 1rem 0.5rem;
+  text-overflow: ellipsis;
+}
+
+.search-bar-container ul li:hover {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: var(--border-radius);
+}
+
+.search-bar-container .searchbar:focus + ul {
+  display: flex;
 }
 
 .current-weather-container {

client/src/components/dashboard.tsx

@@ -1,14 +1,11 @@
 import Map from './map';
+import SearchBar from './search-bar/search-bar';
 import { PiWind, PiEyeLight, PiSunLight, PiDropLight, PiWindLight, PiThermometerSimple } from 'react-icons/pi';
 
 const Dashboard = () => {
     return (
         <div className='dashboard'>
-            <input
-                type='text'
-                className='searchbar'
-                placeholder='Search for location'
-            />
+            <SearchBar />
 
             <div className='current-weather-container'>
                 <div className='title-container'>

client/src/components/search-bar/result-list.tsx

@@ -0,0 +1,32 @@
+import { trpc } from '@utils/trpc';
+
+const ResultList: React.FC<{
+    searchQuery: string;
+}> = ({ searchQuery }) => {
+    const { data, isLoading } = trpc.searchLocations.useQuery(searchQuery);
+
+    if(isLoading) {
+        return (
+            <ul className='result-list'>
+                <li>Searching...</li>
+            </ul>
+        );
+    };
+
+    return (
+        <ul className='result-list'>
+            {
+                data?.length ?
+                    data.map((location) => (
+                        <li key={ location.id }>
+                            { location.name }
+                        </li>
+                    ))
+                :
+                    <li>No results found</li>
+            }
+        </ul>
+    );
+}
+
+export default ResultList;

client/src/components/search-bar/search-bar.tsx

@@ -0,0 +1,26 @@
+import { useState } from 'react';
+import ResultList from './result-list';
+import { debounce } from '@utils/utility-functions';
+
+const SearchBar = () => {
+    const [searchQuery, setSearchQuery] = useState('');
+
+    return (
+        <div className='search-bar-container'>
+            <input
+                type='text'
+                className='searchbar'
+                placeholder='Search for location'
+                onChange={ debounce((e: React.ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value), 300) }
+            />
+
+            {
+                searchQuery && (
+                    <ResultList searchQuery={ searchQuery } />
+                )
+            }
+        </div>
+    );
+};
+
+export default SearchBar;

client/src/utils/utility-functions.ts

@@ -0,0 +1,13 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const debounce = <T extends (...params: any[]) => any>(
+	fn: T,
+	ms: number = 500
+) => {
+	let timer: NodeJS.Timeout;
+
+	return (...args: Parameters<T>) => {
+		clearTimeout(timer);
+
+		timer = setTimeout(() => fn(...args), ms);
+	};
+};