[feat] Direct Search Item Component

app/testing/page.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { CSSProperties } from 'react';
+import ProjectItem from '@/components/ProjectItem';
+
+export default function Home() {
+  return (
+    <main style={mainStyles}>
+      <ProjectItem project_id={1}></ProjectItem>
+    </main>
+  );
+}
+
+// CSS styles
+
+const mainStyles: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+};

components/KeyDevelopmentMilestone/index.tsx

@@ -1,4 +1,4 @@
-import { CheckmarkIcon, DotDotDotIcon } from '../../assets/KDM-Icons/icons';
+import { CheckmarkIcon, DotDotDotIcon } from '../../assets/Icons/icons';
 import { Milestone, MilestoneLabel } from './styles';
 
 export default function KeyDevelopmentMilestone({

components/ProjectItem/index.tsx

@@ -0,0 +1,175 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Image from 'next/image';
+import {
+  queryDefaultImages,
+  queryProjectbyId,
+} from '@/api/supabase/queries/query';
+import {
+  InProgressIcon,
+  OperationalIcon,
+  SmallEnergyStorageIcon,
+  SmallGeothermalIcon,
+  SmallHydroelectricIcon,
+  SmallLandBasedWindIcon,
+  SmallOffshoreWindIcon,
+  SmallPumpedStorage,
+  SmallSizeIcon,
+  SmallSolarPowerIcon,
+} from '@/assets/Icons/icons';
+import { Heading2, TagText2 } from '@/styles/texts';
+import { Project } from '@/types/schema';
+import ProjectModal from '../ProjectModal';
+import {
+  projectImageStyles,
+  ProjectInfo,
+  ProjectName,
+  ProjectSize,
+  ProjectSizeAndType,
+  ProjectStatus,
+  ProjectType,
+  StyledProjectItem,
+} from './styles';
+
+export default function ProjectItem({ project_id }: { project_id: number }) {
+  const [project, setProject] = useState<Project | null>(null);
+  const [defaultImage, setDefaultImage] = useState<string | null>(null);
+  const [modalOpen, setModalOpen] = useState(false);
+
+  useEffect(() => {
+    queryProjectbyId(project_id).then(data => {
+      setProject(data);
+    });
+  }, [project_id]);
+
+  useEffect(() => {
+    // Fetch default image when project data is available
+    const fetchDefaultImage = async () => {
+      if (!project?.project_image && project?.renewable_energy_technology) {
+        try {
+          const fetchedImage = await queryDefaultImages(
+            project.renewable_energy_technology,
+          );
+          setDefaultImage(fetchedImage.default_image);
+        } catch (error) {
+          console.error('Error fetching default image:', error);
+        }
+      }
+    };
+    fetchDefaultImage();
+  }, [project]);
+
+  const {
+    // id,
+    project_name,
+    renewable_energy_technology,
+    size,
+    // developer,
+    // longitude,
+    // latitude,
+    project_status,
+    // county,
+    // town,
+    // region,
+    // state_senate_district,
+    // assembly_district,
+    project_image,
+    // additional_information,
+    // key_development_milestones,
+    // proposed_cod,
+    // approved
+  } = project || {};
+
+  const getProjectImageSrc = () => {
+    return project_image || defaultImage || '';
+  };
+
+  // Sets status label to "Operational" or "In Progress"
+  let projectStatus = project_status;
+  if (project_status !== 'Operational') {
+    projectStatus = 'In Progress';
+  }
+
+  // Sets status icon to OperationalIcon or InProgressIcon
+  let statusIcon = <OperationalIcon />;
+  if (project_status !== 'Operational') {
+    statusIcon = <InProgressIcon />;
+  }
+
+  const projectImageAlt = project_image
+    ? `${project_name} project image`
+    : defaultImage
+      ? `${renewable_energy_technology} default image`
+      : 'No image available';
+
+  let projectTypeIcon = <></>;
+  switch (renewable_energy_technology) {
+    case 'Land-Based Wind':
+      projectTypeIcon = <SmallLandBasedWindIcon />;
+      break;
+    case 'Solar PV':
+      projectTypeIcon = <SmallSolarPowerIcon />;
+      break;
+    case 'Hydroelectric':
+      projectTypeIcon = <SmallHydroelectricIcon />;
+      break;
+    case 'Offshore Wind':
+      projectTypeIcon = <SmallOffshoreWindIcon />;
+      break;
+    case 'Geothermal':
+      projectTypeIcon = <SmallGeothermalIcon />;
+      break;
+    case 'Energy Storage':
+      projectTypeIcon = <SmallEnergyStorageIcon />;
+      break;
+    case 'Pumped Storage':
+      projectTypeIcon = <SmallPumpedStorage />;
+      break;
+  }
+
+  const handleProjectClick = () => {
+    setModalOpen(true);
+  };
+
+  if (modalOpen) {
+    return (
+      <ProjectModal
+        project_id={project_id}
+        closeModal={() => setModalOpen(false)}
+        openFirst={true}
+      />
+    );
+  }
+
+  return (
+    <StyledProjectItem onClick={handleProjectClick}>
+      <ProjectInfo>
+        <Heading2>
+          <ProjectName>{project_name?.toUpperCase()}</ProjectName>
+        </Heading2>
+        <ProjectStatus>
+          {statusIcon}
+          <TagText2>{projectStatus}</TagText2>
+        </ProjectStatus>
+        <ProjectSizeAndType>
+          <ProjectSize>
+            <SmallSizeIcon />
+            <TagText2>{size} MW</TagText2>
+          </ProjectSize>
+          <ProjectType>
+            {projectTypeIcon}
+            <TagText2>{renewable_energy_technology}</TagText2>
+          </ProjectType>
+        </ProjectSizeAndType>
+      </ProjectInfo>
+      <Image
+        src={getProjectImageSrc()}
+        alt={projectImageAlt}
+        width={340}
+        height={250}
+        style={projectImageStyles}
+      />
+    </StyledProjectItem>
+  );
+}

components/ProjectItem/styles.ts

@@ -0,0 +1,68 @@
+import { CSSProperties } from 'react';
+import styled from 'styled-components';
+
+export const StyledProjectItem = styled.button`
+  display: flex;
+  align-items: center;
+  width: 20rem;
+  height: 7.625rem;
+  flex-shrink: 0;
+  border-radius: 18px;
+  border-top: 1px solid rgba(46, 58, 89, 0.1);
+  border-bottom: 1px solid rgba(46, 58, 89, 0.1);
+  border-left: 0;
+  border-right: 0;
+  background: rgba(255, 255, 255, 0.9);
+  padding-top: 0;
+  padding-bottom: 0;
+`;
+
+export const projectImageStyles: CSSProperties = {
+  width: '7.75rem',
+  height: '6.75rem',
+  borderRadius: '0px 12px 12px 0px',
+  opacity: '0.9',
+  background: 'url(<path-to-image>) lightgray 50% / cover no-repeat',
+  marginLeft: '-0.9375rem',
+};
+
+export const ProjectInfo = styled.div`
+  width: 12.625rem;
+  height: 6.75rem;
+  border-radius: 0px 7.5px 7.5px 0px;
+  border-right: 1px solid #eff0f3;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 1px 0px 4px 0px rgba(255, 255, 255, 0.25);
+  padding-left: 0.875rem;
+  z-index: 2;
+`;
+
+export const ProjectName = styled.div`
+  margin-top: 1.5rem;
+  text-align: left;
+`;
+
+export const ProjectStatus = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 0.3125rem;
+`;
+
+export const ProjectSizeAndType = styled.div`
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 1.5rem;
+`;
+
+export const ProjectSize = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+`;
+
+export const ProjectType = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+`;

components/ProjectModal/index.tsx

@@ -15,7 +15,7 @@ import {
   Heading1,
   TagText1,
 } from '../../styles/texts';
-import { Project } from '../../types/schema';
+import { Milestone, Project } from '../../types/schema';
 import KeyDevelopmentMilestone from '../KeyDevelopmentMilestone';
 import {
   AdditionalInfo,
@@ -36,12 +36,6 @@ import {
   ProjectSize,
 } from './styles';
 
-interface Milestone {
-  milestoneTitle: string;
-  completed: boolean;
-  date: string | null;
-}
-
 export default function ProjectModal({
   project_id,
   closeModal,

styles/colors.ts

@@ -1,5 +1,6 @@
 const COLORS = {
   navy: '#2E3A59',
+  navy75: '#626C83',
   electricBlue: '#4974E0',
   lightBlue: '#92ACED',
   green: '#0E7B30',

styles/texts.ts

@@ -43,6 +43,15 @@ export const Heading1 = styled.h1<TextProps>`
   line-height: normal;
 `;
 
+export const Heading2 = styled.h2<TextProps>`
+  ${TextStylesCoinbaseSans}
+  font-size: 0.9375rem;
+  color: ${COLORS.navy};
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`;
+
 export const SubHeading1 = styled.h2<TextProps>`
   ${TextStylesCoinbaseSans}
   font-size: 0.875rem;
@@ -103,7 +112,7 @@ export const TagText1 = styled.p<TextProps>`
 
 export const TagText2 = styled.p<TextProps>`
   ${TextStylesCoinbaseText}
-  color: ${COLORS.navy};
+  color: ${COLORS.navy75};
   font-size: 0.625rem;
   font-style: normal;
   font-weight: 300;

types/schema.d.ts

@@ -19,3 +19,9 @@ export type Project = {
   proposed_cod: Date;
   approved: boolean;
 };
+
+export type Milestone = {
+  milestoneTitle: string;
+  completed: boolean;
+  date: string | null;
+};