Added blank projects list modal

calblueprint · Nov 11, 2024 · 658f58d · 658f58d
1 parent cd907be
commit 658f58d
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 56 deletions.
diff --git 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 Map from '@/components/Map';
 import queryProjects from '../api/supabase/queries/query';
 import { Project } from '../types/schema';
@@ -21,6 +22,7 @@ export default function Home() {
     <main style={mainStyles}>
       {error ? <div style={errorStyles}>{error}</div> : null}
       {projects ? <Map projects={projects} /> : null}
+      <AllProjectsModal />
     </main>
   );
 }

diff --git a/components/AllProjectsModal/index.tsx b/components/AllProjectsModal/index.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import React from 'react';
+import Modal from 'react-modal';
+import {
+  modalContentStyles,
+  modalOverlayStyles,
+  ProjectDetails,
+} from './styles';
+
+export default function AllProjectsModal() {
+  return (
+    <Modal
+      isOpen={true}
+      style={{
+        overlay: modalOverlayStyles,
+        content: modalContentStyles,
+      }}
+    >
+      <ProjectDetails>hi</ProjectDetails>
+    </Modal>
+  );
+}
diff --git a/components/AllProjectsModal/styles.ts b/components/AllProjectsModal/styles.ts
@@ -0,0 +1,40 @@
+import { CSSProperties } from 'react';
+import styled from 'styled-components';
+import COLORS from '@/styles/colors';
+
+export const modalOverlayStyles: CSSProperties = {
+  width: '310px',
+  height: '100%',
+  backgroundColor: 'transparent',
+};
+
+export const modalContentStyles: CSSProperties = {
+  display: 'flex',
+  top: '85px',
+  left: '20px',
+  width: '90vw',
+  maxWidth: '356px',
+  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',
+  overflow: 'hidden',
+};
+
+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: 340px;
+  overflow-y: auto;
+`;
diff --git a/components/ProjectModal/index.tsx b/components/ProjectModal/index.tsx
@@ -123,61 +123,59 @@ export default function ProjectModal({
       : 'No image available';
 
   return (
-    <div>
-      <Modal
-        isOpen={openFirst}
-        style={{
-          overlay: modalOverlayStyles,
-          content: modalContentStyles,
-        }}
-      >
-        <ProjectDetails>
-          <Image
-            src={getProjectImageSrc()}
-            alt={projectImageAlt}
-            width={340}
-            height={250}
-            style={projectImageStyles}
-          />
-          <ProjectOverview>
-            <Developer>
-              <BodyText1>Developer ‣ {developer}</BodyText1>
-              <CloseButton onClick={closeModal}>
-                <FiX size={20} color="#000" />
-              </CloseButton>
-            </Developer>
-            <ProjectName>
-              <Heading1>{project_name?.toUpperCase()}</Heading1>
-            </ProjectName>
-            <ProjectFilterWrapper>
-              <ProjectFilter>
-                <TagText1>{project_status}</TagText1>
-              </ProjectFilter>
-              <ProjectFilter>
-                <TagText1>{renewable_energy_technology}</TagText1>
-              </ProjectFilter>
-            </ProjectFilterWrapper>
-          </ProjectOverview>
-          <ProjectSize>
-            <AccentText1>
-              <FiZap size={42} />
-              {size}
-            </AccentText1>
-            <AccentText2>MW</AccentText2>
-          </ProjectSize>
-          <Divider />
-          <AllKDMS>{KDMs}</AllKDMS>
-          <AdditionalInfo>
-            <DetailsContainer>
-              <BodyText1>DETAILS</BodyText1>
-              <Divider />
-            </DetailsContainer>
-            <AdditionalText>
-              <BodyText1>{additional_information}</BodyText1>
-            </AdditionalText>
-          </AdditionalInfo>
-        </ProjectDetails>
-      </Modal>
-    </div>
+    <Modal
+      isOpen={openFirst}
+      style={{
+        overlay: modalOverlayStyles,
+        content: modalContentStyles,
+      }}
+    >
+      <ProjectDetails>
+        <Image
+          src={getProjectImageSrc()}
+          alt={projectImageAlt}
+          width={340}
+          height={250}
+          style={projectImageStyles}
+        />
+        <ProjectOverview>
+          <Developer>
+            <BodyText1>Developer ‣ {developer}</BodyText1>
+            <CloseButton onClick={closeModal}>
+              <FiX size={20} color="#000" />
+            </CloseButton>
+          </Developer>
+          <ProjectName>
+            <Heading1>{project_name?.toUpperCase()}</Heading1>
+          </ProjectName>
+          <ProjectFilterWrapper>
+            <ProjectFilter>
+              <TagText1>{project_status}</TagText1>
+            </ProjectFilter>
+            <ProjectFilter>
+              <TagText1>{renewable_energy_technology}</TagText1>
+            </ProjectFilter>
+          </ProjectFilterWrapper>
+        </ProjectOverview>
+        <ProjectSize>
+          <AccentText1>
+            <FiZap size={42} />
+            {size}
+          </AccentText1>
+          <AccentText2>MW</AccentText2>
+        </ProjectSize>
+        <Divider />
+        <AllKDMS>{KDMs}</AllKDMS>
+        <AdditionalInfo>
+          <DetailsContainer>
+            <BodyText1>DETAILS</BodyText1>
+            <Divider />
+          </DetailsContainer>
+          <AdditionalText>
+            <BodyText1>{additional_information}</BodyText1>
+          </AdditionalText>
+        </AdditionalInfo>
+      </ProjectDetails>
+    </Modal>
   );
 }