diff --git a/api/maps/MarkerInfoWindow.tsx b/api/maps/MarkerInfoWindow.tsx index 4da9355..e7a7f55 100644 --- a/api/maps/MarkerInfoWindow.tsx +++ b/api/maps/MarkerInfoWindow.tsx @@ -7,7 +7,7 @@ import { Pin, useAdvancedMarkerRef, } from '@vis.gl/react-google-maps'; -import { TagText2 } from '@/styles/texts'; +import { TagText1 } from '@/styles/texts'; import energyStorage from '../../assets/Custom-Markers/energy_storage.svg'; import geothermal from '../../assets/Custom-Markers/geothermal.svg'; import hydroelectric from '../../assets/Custom-Markers/hydroelectric.svg'; @@ -111,7 +111,7 @@ export const MarkerInfoWindow = ({ {infoWindowShown && ( - {projectName} + {projectName} )} diff --git a/api/supabase/queries/query.ts b/api/supabase/queries/query.ts index ebd913a..96c4083 100644 --- a/api/supabase/queries/query.ts +++ b/api/supabase/queries/query.ts @@ -1,15 +1,17 @@ import { Project } from '../../../types/schema'; import supabase from '../createClient'; -export default async function queryProjects() { +export default async function queryProjects(): Promise { const { data: projects, error } = await supabase .from('Projects') .select('*') .eq('approved', true); - console.log('PROJECTS', projects, 'ERROR', error); + if (error) { + throw new Error(`Error fetching projects: ${error.message}`); + } - return { projects, error }; + return projects; } export async function queryProjectbyId(id: number): Promise { diff --git a/app/page.tsx b/app/page.tsx index cdce903..b21b4ab 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,6 +1,7 @@ 'use client'; import { CSSProperties, useEffect, useState } from 'react'; +import AllProjectsModal from '@/components/AllProjectsModal'; import MapViewScreen from '@/components/MapViewScreen'; import queryProjects from '../api/supabase/queries/query'; import { Project } from '../types/schema'; @@ -12,7 +13,7 @@ export default function Home() { useEffect(() => { queryProjects() .then(data => { - setProjects(data.projects); + setProjects(data); }) .catch(err => setError(err)); }, []); @@ -21,6 +22,7 @@ export default function Home() {
{error ?
{error}
: null} {projects ? : null} +
); } diff --git a/components/AllProjectsModal/index.tsx b/components/AllProjectsModal/index.tsx new file mode 100644 index 0000000..6c5c978 --- /dev/null +++ b/components/AllProjectsModal/index.tsx @@ -0,0 +1,39 @@ +'use client'; + +import Modal from 'react-modal'; +import { SubHeading2 } from '@/styles/texts'; +import { Project } from '../../types/schema'; +import ProjectItem from '../ProjectItem'; +import { + AllProjectsHeader, + modalContentStyles, + modalOverlayStyles, + ProjectDetails, +} from './styles'; + +export default function AllProjectsModal({ + projects, +}: { + projects: Project[] | null; +}) { + const projectItems = projects?.map((project: Project) => { + return ; + }); + + return ( + + + + ALL PROJECTS + + {projectItems} + + + ); +} diff --git a/components/AllProjectsModal/styles.ts b/components/AllProjectsModal/styles.ts new file mode 100644 index 0000000..52c6689 --- /dev/null +++ b/components/AllProjectsModal/styles.ts @@ -0,0 +1,47 @@ +import { CSSProperties } from 'react'; +import styled from 'styled-components'; +import COLORS from '@/styles/colors'; + +export const modalOverlayStyles: CSSProperties = { + width: '21.25rem', + height: '100%', + backgroundColor: 'transparent', +}; + +export const modalContentStyles: CSSProperties = { + display: 'flex', + top: '5.3125rem', + left: '1.25rem', + width: '90vw', + maxWidth: '22.25rem', + height: '85vh', + borderRadius: 'var(--Spacing-Small, 16px)', + border: '0.75px solid var(--WorldPeas-White, #fff)', + background: + 'linear-gradient(180deg, rgba(250, 250, 250, 0.32) 0%, rgba(238, 238, 238, 0.65) 100%)', + backdropFilter: 'blur(7.5px)', + paddingTop: '0.625rem', + paddingBottom: '0.625rem', + boxSizing: 'border-box', + flexDirection: 'column', + alignItems: 'center', +}; + +export const ProjectDetails = styled.div` + display: flex; + flex-direction: column; + align-items: center; + border-radius: var(--Spacing-Small, 16px); + height: 100%; + background: ${COLORS.white}; + width: 21.25rem; + overflow-y: auto; + gap: 0.75rem; + padding-bottom: 0.8125rem; +`; + +export const AllProjectsHeader = styled.div` + display: flex; + justify-content: space-between; + margin-top: 1.4375rem; +`; diff --git a/components/ProjectItem/index.tsx b/components/ProjectItem/index.tsx index 2835edb..b31ae15 100644 --- a/components/ProjectItem/index.tsx +++ b/components/ProjectItem/index.tsx @@ -21,7 +21,7 @@ import { SolarPvIcon, } from '@/assets/Technology-Tag-Icons/icons'; import COLORS from '@/styles/colors'; -import { Heading2, TagText2 } from '@/styles/texts'; +import { Heading2, TagText1 } from '@/styles/texts'; import { Project } from '@/types/schema'; import ProjectModal from '../ProjectModal'; import { @@ -162,16 +162,16 @@ export default function ProjectItem({ project_id }: { project_id: number }) { {statusIcon} - {projectStatus} + {projectStatus} - {size} MW + {size} MW {energyTypeIconMap[renewable_energy_technology ?? '']} - {renewable_energy_technology} + {renewable_energy_technology} diff --git a/components/ProjectItem/styles.ts b/components/ProjectItem/styles.ts index 861cb60..938b784 100644 --- a/components/ProjectItem/styles.ts +++ b/components/ProjectItem/styles.ts @@ -1,5 +1,6 @@ import { CSSProperties } from 'react'; import styled from 'styled-components'; +import COLORS from '@/styles/colors'; export const StyledProjectItem = styled.button` display: flex; @@ -15,6 +16,13 @@ export const StyledProjectItem = styled.button` background: rgba(255, 255, 255, 0.9); padding-top: 0; padding-bottom: 0; + &:hover { + border: 1px solid rgba(46, 58, 89, 0.05); + background: ${COLORS.white}; + box-shadow: + 0px 1px 4px 0px rgba(77, 87, 114, 0.4), + 0px -2px 6px 0px rgba(255, 255, 255, 0.1); + } `; export const projectImageStyles: CSSProperties = { diff --git a/components/ProjectModal/index.tsx b/components/ProjectModal/index.tsx index a66044a..03e926c 100644 --- a/components/ProjectModal/index.tsx +++ b/components/ProjectModal/index.tsx @@ -118,57 +118,55 @@ export default function ProjectModal({ : 'No image available'; return ( -
- - - {projectImageAlt} - - - Developer ‣ {developer} - - - - - - {project_name?.toUpperCase()} - - - - - - - - - - {size} - - Megawatts - - - {KDMs} - - - DETAILS - - - - {additional_information} - - - - -
+ + + {projectImageAlt} + + + Developer ‣ {developer} + + + + + + {project_name?.toUpperCase()} + + + + + + + + + + {size} + + Megawatts + + + {KDMs} + + + DETAILS + + + + {additional_information} + + + + ); } diff --git a/styles/colors.ts b/styles/colors.ts index c4b6017..383cb70 100644 --- a/styles/colors.ts +++ b/styles/colors.ts @@ -6,7 +6,6 @@ const COLORS = { green: '#0E7B30', earthyGreen: '#4D8B31', navy: '#2E3A59', - navy75: '#626C83', electricBlue: '#4974E0', lightBlue: '#92ACED', teal: '#4896BC', diff --git a/styles/texts.ts b/styles/texts.ts index 593fb5e..57fae34 100644 --- a/styles/texts.ts +++ b/styles/texts.ts @@ -1,5 +1,3 @@ -'use client'; - import styled, { css } from 'styled-components'; import COLORS from './colors'; import { CoinbaseMono, CoinbaseSans, CoinbaseText } from './fonts'; @@ -61,6 +59,16 @@ export const SubHeading1 = styled.h2` line-height: normal; `; +export const SubHeading2 = styled.h2` + ${TextStylesCoinbaseMono} + font-size: 0.625rem; + color: ${COLORS.navy}; + font-style: normal; + font-weight: 300; + opacity: 0.75; + line-height: 120%; +`; + export const BodyText1 = styled.p` ${TextStylesCoinbaseMono} color: ${COLORS.navy}; @@ -105,20 +113,11 @@ export const TagText1 = styled.p` color: ${COLORS.navy}; font-size: 0.625rem; font-style: normal; - font-weight: 300; + font-weight: 200; opacity: 0.75; line-height: normal; `; -export const TagText2 = styled.p` - ${TextStylesCoinbaseText} - color: ${COLORS.navy75}; - font-size: 0.625rem; - font-style: normal; - font-weight: 300; - line-height: normal; -`; - export const FilterHeadingUnused = styled.h3` ${TextStylesCoinbaseText} color: ${COLORS.navy};