[feat] added Search Bar, styled Map, and started on Filters

app/page.tsx

@@ -29,7 +29,7 @@ export default function Home() {
 
 const mainStyles: CSSProperties = {
   width: '100%',
-  height: '100vh',
+  height: '100%',
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',

components/FilterBar/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { RiArrowDropDownLine } from 'react-icons/ri';
+import Filter from '../../types/helper';
+import * as styles from './styles';
+
+interface Filter {
+  id: string;
+  label: string;
+  icon: React.ReactNode;
+}
+
+export const FilterBar = ({
+  filters,
+  onFilterChange,
+}: {
+  filters: Filter[];
+  onFilterChange: (filter: Filter) => void;
+}) => {
+  return (
+    <div style={styles.filterBarStyles}>
+      {filters.map(filter => (
+        <div key={filter.id}>
+          <button
+            key={filter.label}
+            onClick={() => onFilterChange(filter)}
+            style={styles.filterButtonStyles}
+          >
+            {filter.icon}
+            {filter.label}
+            <RiArrowDropDownLine />
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+};

components/FilterBar/styles.ts

@@ -0,0 +1,32 @@
+import { CSSProperties } from 'react';
+
+export const filterBarStyles: CSSProperties = {
+  display: 'flex',
+  position: 'absolute',
+  top: '1.5%',
+  right: '1.5%',
+  background:
+    'var(--background-gradient, linear-gradient(180deg, rgba(250, 250, 250, 0.32) 0%, rgba(238, 238, 238, 0.65) 100%))',
+  backdropFilter: 'blur(7.5px)',
+  padding: '6px 8px',
+  borderRadius: '100px',
+  zIndex: 1000,
+  border: '0.75px solid #FFF',
+  marginTop: '1.5%',
+};
+
+export const filterButtonStyles: CSSProperties = {
+  padding: '8px 8px',
+  background: '#FFF',
+  border: 'none',
+  borderRadius: '100px',
+  cursor: 'pointer',
+  fontSize: '14px',
+  fontStyle: 'normal',
+  fontWeight: '400',
+  lineHeight: 'normal',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '12px',
+  fontFamily: '"Coinbase Sans", sans-serif',
+};

components/Map/map.tsx

@@ -4,10 +4,26 @@ import { APIProvider, Map as GoogleMap } from '@vis.gl/react-google-maps';
 import AddMarkers from '../../api/maps/AddMarkers';
 import { Project } from '../../types/schema';
 import './styles.css';
+import { CSSProperties } from 'react';
+import { FaMapMarkerAlt } from 'react-icons/fa';
+import { FaBolt } from 'react-icons/fa6';
+import { IoIosCheckmarkCircleOutline } from 'react-icons/io';
+import { MdLightbulbOutline } from 'react-icons/md';
+import { FilterBar } from '../FilterBar';
+import { SearchBar } from '../SearchBar';
 
-const containerStyle = {
-  width: '700px',
-  height: '700px',
+interface Filter {
+  id: string;
+  label: string;
+  icon: React.ReactNode;
+}
+
+const containerStyle: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  top: '0px',
+  left: '0px',
 };
 
 const center = {
@@ -17,16 +33,31 @@ const center = {
 
 const mapId = '54eb1c7baba5a715'; // needed for AdvancedMarker
 
+const filters = [
+  { id: 'status', label: 'STATUS', icon: <IoIosCheckmarkCircleOutline /> },
+  { id: 'technology', label: 'TECHNOLOGY', icon: <FaBolt /> },
+  { id: 'projectSize', label: 'PROJECT SIZE', icon: <MdLightbulbOutline /> },
+  { id: 'location', label: 'LOCATION', icon: <FaMapMarkerAlt /> },
+];
+
+const handleFilterChange = (filter: Filter) => {
+  console.log(filter);
+};
+
 export default function Map(props: { projects: Project[] | null }) {
   return (
     <APIProvider apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY as string}>
+      <SearchBar />
+      <FilterBar filters={filters} onFilterChange={handleFilterChange} />
       <GoogleMap
         style={containerStyle}
         defaultCenter={center}
         defaultZoom={7}
         gestureHandling={'greedy'}
         disableDefaultUI={true}
         mapId={mapId}
+        mapTypeId={'roadmap'}
+        clickableIcons={false}
       >
         <AddMarkers projects={props.projects} />
       </GoogleMap>

components/SearchBar/index.tsx

@@ -0,0 +1,19 @@
+import { AiOutlineClose } from 'react-icons/ai';
+import { IoIosSearch } from 'react-icons/io';
+import * as styles from './styles';
+
+export const SearchBar = () => {
+  return (
+    <div style={styles.searchBarPaddingStyles}>
+      <div style={styles.searchBarBackgroundStyles}>
+        <IoIosSearch style={styles.iconStyles} />
+        <input
+          type="text"
+          placeholder="Search for a project"
+          style={styles.searchBarStyles}
+        />
+        <AiOutlineClose style={styles.iconStyles} />
+      </div>
+    </div>
+  );
+};

components/SearchBar/styles.ts

@@ -0,0 +1,49 @@
+import { CSSProperties } from 'react';
+
+export const searchBarPaddingStyles: CSSProperties = {
+  display: 'inline-flex',
+  position: 'absolute',
+  top: '3%',
+  left: '2%',
+  background:
+    'var(--background-gradient, linear-gradient(180deg, rgba(250, 250, 250, 0.32) 0%, rgba(238, 238, 238, 0.65) 100%))',
+  backdropFilter: 'blur(7.5px)',
+  padding: '8px',
+  alignItems: 'center',
+  gap: '6px',
+  borderRadius: '12px',
+  border: '0.75px solid #FFF',
+  zIndex: 3,
+};
+
+export const searchBarBackgroundStyles: CSSProperties = {
+  display: 'flex',
+  width: '340px',
+  height: '50px',
+  padding: '5px 29px',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexShrink: '0',
+  gap: '8px',
+  borderRadius: '8px',
+  background: '#FFF',
+  boxSizing: 'border-box',
+};
+
+export const searchBarStyles: CSSProperties = {
+  border: 'none',
+  outline: 'none',
+  boxShadow: 'none',
+  width: '80%',
+  color: '#4974E0',
+  fontSize: '14px',
+  fontFamily: 'CoinbaseText, sans-serif',
+};
+
+export const iconStyles: CSSProperties = {
+  width: '18px',
+  height: '18px',
+  flexShrink: '0',
+  fill: 'var(--not-ace-blue, #4974E0)',
+};

package.json

@@ -22,6 +22,7 @@
     "next": "^14.2.13",
     "react": "^18",
     "react-dom": "^18",
+    "react-icons": "^5.3.0",
     "react-modal": "^3.16.1",
     "styled-components": "^6.1.13"
   },