Merge pull request #49 from calblueprint/22-chore-style-the-home-page…

…-incl-non-functional-search-bar-+-filters

[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,35 @@
+import React from 'react';
+import { RiArrowDropDownLine } from 'react-icons/ri';
+import Filter from '../../types/helper';
+import { FilterBarStyles, FilterButtonStyles } from './styles';
+
+interface Filter {
+  id: string;
+  label: string;
+  icon: React.ReactNode;
+}
+
+export const FilterBar = ({
+  filters,
+  onFilterChange,
+}: {
+  filters: Filter[];
+  onFilterChange: (filter: Filter) => void;
+}) => {
+  return (
+    <FilterBarStyles>
+      {filters.map(filter => (
+        <div key={filter.id}>
+          <FilterButtonStyles
+            key={filter.label}
+            onClick={() => onFilterChange(filter)}
+          >
+            {filter.icon}
+            {filter.label}
+            <RiArrowDropDownLine />
+          </FilterButtonStyles>
+        </div>
+      ))}
+    </FilterBarStyles>
+  );
+};

components/FilterBar/styles.ts

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+
+export const FilterBarStyles = styled.div`
+  display: flex;
+  position: absolute;
+  top: 1.5%;
+  right: 1.5%;
+  background: linear-gradient(
+    180deg,
+    rgba(250, 250, 250, 0.32) 0%,
+    rgba(238, 238, 238, 0.65) 100%
+  );
+  backdrop-filter: blur(7.5px);
+  padding: 0.4rem 0.5rem;
+  border-radius: 6.25rem;
+  z-index: 1000;
+  border: 0.05rem solid #fff;
+  margin-top: 1.5%;
+`;
+
+export const FilterButtonStyles = styled.button`
+  padding: 0.5rem 0.5rem;
+  background: #fff;
+  border: none;
+  border-radius: 6.25rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-family: 'Coinbase Sans', sans-serif;
+`;

components/Map/index.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,24 @@
+import { AiOutlineClose } from 'react-icons/ai';
+import { IoIosSearch } from 'react-icons/io';
+import {
+  IconStyles,
+  SearchBarBackgroundStyles,
+  SearchBarPaddingStyles,
+  SearchBarStyles,
+} from './styles';
+
+export const SearchBar = () => {
+  return (
+    <SearchBarPaddingStyles>
+      <SearchBarBackgroundStyles>
+        <IconStyles>
+          <IoIosSearch />
+        </IconStyles>
+        <SearchBarStyles type="text" placeholder="Search for a project" />
+        <IconStyles>
+          <AiOutlineClose />
+        </IconStyles>
+      </SearchBarBackgroundStyles>
+    </SearchBarPaddingStyles>
+  );
+};

components/SearchBar/styles.ts

@@ -0,0 +1,53 @@
+import styled from 'styled-components';
+import COLORS from '../../styles/colors';
+
+export const SearchBarPaddingStyles = styled.div`
+  display: inline-flex;
+  position: absolute;
+  top: 3%;
+  left: 1.7%;
+  background: linear-gradient(
+    180deg,
+    rgba(250, 250, 250, 0.32) 0%,
+    rgba(238, 238, 238, 0.65) 100%
+  );
+  backdrop-filter: blur(7.5px);
+  padding: 0.5rem;
+  align-items: center;
+  gap: 0.4rem;
+  border-radius: 0.75rem;
+  border: 0.05rem solid #fff;
+  z-index: 3;
+`;
+
+export const SearchBarBackgroundStyles = styled.div`
+  display: flex;
+  width: 21.3rem;
+  height: 3.1rem;
+  padding: 0.3rem 1.8rem;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 0.5rem;
+  border-radius: 0.5rem;
+  background: #fff;
+  box-sizing: border-box;
+`;
+
+export const SearchBarStyles = styled.input`
+  border: none;
+  outline: none;
+  box-shadow: none;
+  width: 80%;
+  color: #4974e0;
+  font-size: 0.9rem;
+  font-family: CoinbaseText, sans-serif;
+`;
+
+export const IconStyles = styled.div`
+  width: 1.1rem;
+  height: 1.1rem;
+  flex-shrink: 0;
+  color: ${COLORS.blue};
+`;