[feat] Customized Icons for Renewable Energy Technology and Status (incl. Proposed COD)

assets/Status-Tag-Icons/icons.tsx

@@ -0,0 +1,40 @@
+export const CalendarIcon = () => (
+  <svg
+    width="7"
+    height="8"
+    viewBox="0 0 7 8"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M1.54412 0.5C1.62602 0.5 1.70457 0.532537 1.76249 0.590452C1.8204 0.648368 1.85294 0.726918 1.85294 0.808824V1.11765H4.52941V0.808824C4.52941 0.726918 4.56195 0.648368 4.61986 0.590452C4.67778 0.532537 4.75633 0.5 4.83824 0.5C4.92014 0.5 4.99869 0.532537 5.05661 0.590452C5.11452 0.648368 5.14706 0.726918 5.14706 0.808824V1.12094C5.20965 1.12259 5.26798 1.12561 5.32206 1.13C5.47853 1.14235 5.62512 1.17035 5.76388 1.24118C5.97699 1.34975 6.15025 1.52301 6.25882 1.73612C6.32965 1.87488 6.35765 2.02147 6.37 2.17794C6.38235 2.32824 6.38235 2.51147 6.38235 2.73176V5.88588C6.38235 6.10618 6.38235 6.28941 6.37 6.43971C6.35765 6.59618 6.32965 6.74276 6.25882 6.88153C6.15036 7.09458 5.97725 7.26783 5.76429 7.37647C5.62512 7.44729 5.47853 7.47529 5.32206 7.48765C5.17177 7.5 4.98853 7.5 4.76865 7.5H1.61412C1.39382 7.5 1.21059 7.5 1.06029 7.48765C0.903824 7.47529 0.757235 7.44729 0.618471 7.37647C0.405486 7.26812 0.23224 7.09516 0.12353 6.88235C0.052706 6.74318 0.024706 6.59659 0.012353 6.44012C8.6613e-08 6.28982 0 6.10659 0 5.88671V2.73176C0 2.51147 8.6613e-08 2.32824 0.012353 2.17794C0.024706 2.02147 0.052706 1.87488 0.12353 1.73612C0.2321 1.52301 0.40536 1.34975 0.618471 1.24118C0.757235 1.17035 0.903824 1.14235 1.06029 1.13C1.11437 1.12561 1.17271 1.12259 1.23529 1.12094V0.808824C1.23529 0.768268 1.24328 0.72811 1.2588 0.690642C1.27432 0.653174 1.29707 0.619129 1.32575 0.590452C1.35442 0.561775 1.38847 0.539028 1.42594 0.523508C1.4634 0.507988 1.50356 0.5 1.54412 0.5ZM5.76471 3.38235H0.617647V5.87353C0.617647 6.10906 0.617647 6.26759 0.627941 6.38906C0.637412 6.50765 0.654706 6.56406 0.673647 6.60112C0.723059 6.69829 0.801706 6.77694 0.898882 6.82635C0.935941 6.84529 0.992353 6.86259 1.11053 6.87206C1.23241 6.88194 1.39053 6.88235 1.62647 6.88235H4.75588C4.99141 6.88235 5.14994 6.88235 5.27141 6.87206C5.39 6.86259 5.44641 6.84529 5.48347 6.82635C5.58048 6.77698 5.65933 6.69812 5.70871 6.60112C5.72765 6.56406 5.74494 6.50765 5.75441 6.38906C5.76429 6.26759 5.76471 6.10906 5.76471 5.87353V3.38235ZM2.16176 2.04412C2.07986 2.04412 2.00131 2.07665 1.94339 2.13457C1.88548 2.19249 1.85294 2.27104 1.85294 2.35294C1.85294 2.43485 1.88548 2.5134 1.94339 2.57131C2.00131 2.62923 2.07986 2.66176 2.16176 2.66176H4.22059C4.30249 2.66176 4.38104 2.62923 4.43896 2.57131C4.49688 2.5134 4.52941 2.43485 4.52941 2.35294C4.52941 2.27104 4.49688 2.19249 4.43896 2.13457C4.38104 2.07665 4.30249 2.04412 4.22059 2.04412H2.16176Z"
+      fill="#4974E0"
+    />
+  </svg>
+);
+
+export const GreenDotOperationalIcon = () => (
+  <svg
+    width="5"
+    height="6"
+    viewBox="0 0 5 6"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="2.5" cy="3" r="2.5" fill="#1BA546" />
+  </svg>
+);
+
+export const GreyDotInProgressIcon = () => (
+  <svg
+    width="5"
+    height="6"
+    viewBox="0 0 5 6"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="2.5" cy="3" r="2.5" fill="#D6D6D6" />
+  </svg>
+);

components/ProjectModal/index.tsx

@@ -13,10 +13,11 @@ import {
   AccentText2,
   BodyText1,
   Heading1,
-  TagText1,
 } from '../../styles/texts';
 import { Project } from '../../types/schema';
 import KeyDevelopmentMilestone from '../KeyDevelopmentMilestone';
+import StatusTags from '../StatusTag';
+import TechnologyTags from '../TechnologyTag';
 import {
   AdditionalInfo,
   AdditionalText,
@@ -28,7 +29,6 @@ import {
   modalContentStyles,
   modalOverlayStyles,
   ProjectDetails,
-  ProjectFilter,
   ProjectFilterWrapper,
   projectImageStyles,
   ProjectName,
@@ -95,7 +95,7 @@ export default function ProjectModal({
     project_image,
     additional_information,
     key_development_milestones,
-    // proposed_cod,
+    proposed_cod,
     // approved
   } = project || {};
 
@@ -151,12 +151,8 @@ export default function ProjectModal({
               <Heading1>{project_name?.toUpperCase()}</Heading1>
             </ProjectName>
             <ProjectFilterWrapper>
-              <ProjectFilter>
-                <TagText1>{project_status}</TagText1>
-              </ProjectFilter>
-              <ProjectFilter>
-                <TagText1>{renewable_energy_technology}</TagText1>
-              </ProjectFilter>
+              <StatusTags projectStatus={project_status} cod={proposed_cod} />
+              <TechnologyTags technology={renewable_energy_technology} />
             </ProjectFilterWrapper>
           </ProjectOverview>
           <ProjectSize>

components/ProjectModal/styles.ts

@@ -80,17 +80,7 @@ export const ProjectFilterWrapper = styled.div`
   display: flex;
   align-items: center;
   gap: 0.5rem;
-`;
-
-export const ProjectFilter = styled.div`
-  border-radius: 100px;
-  border: 0.5px solid rgba(46, 58, 89, 0.25);
-  display: inline-flex;
-  height: 1.375rem;
-  padding: 0.1rem 0.625rem;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  white-space: nowrap;
 `;
 
 export const CloseButton = styled.button`

components/StatusTag/index.tsx

@@ -0,0 +1,57 @@
+import {
+  CalendarIcon,
+  GreenDotOperationalIcon,
+  GreyDotInProgressIcon,
+} from '../../assets/Status-Tag-Icons/icons';
+import { TagText1 } from '../../styles/texts';
+import {
+  AllTagStyles,
+  CODTagStyles,
+  ProposedCODTagStyles,
+  StatusTagStyles,
+} from './styles';
+
+export default function StatusTag({
+  projectStatus,
+  cod,
+}: {
+  projectStatus: string | undefined;
+  cod: Date | undefined;
+}) {
+  function convertDateToString() {
+    if (!cod) return '';
+    const res = new Date(cod);
+    const year = String(res.getFullYear()).slice(-2);
+    const month = String(res.getMonth() + 1).padStart(2, '0');
+    const day = String(res.getDate()).padStart(2, '0');
+    return `${month}.${day}.${year}`;
+  }
+
+  if (projectStatus === 'Operational') {
+    return (
+      <StatusTagStyles>
+        <GreenDotOperationalIcon /> <TagText1>Operational</TagText1>
+      </StatusTagStyles>
+    );
+  }
+
+  if (projectStatus === 'Proposed') {
+    return cod ? (
+      <AllTagStyles>
+        <ProposedCODTagStyles>
+          <GreyDotInProgressIcon /> <TagText1>Proposed</TagText1>
+        </ProposedCODTagStyles>
+        <CODTagStyles>
+          <CalendarIcon />
+          <TagText1>COD {convertDateToString()}</TagText1>
+        </CODTagStyles>
+      </AllTagStyles>
+    ) : (
+      <StatusTagStyles>
+        <GreyDotInProgressIcon /> <TagText1>Proposed</TagText1>
+      </StatusTagStyles>
+    );
+  }
+
+  return null;
+}

components/StatusTag/styles.ts

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+
+const BaseTagStyles = styled.div`
+  border-radius: 6.25rem;
+  border: 0.031rem solid rgba(46, 58, 89, 0.25);
+  display: inline-flex;
+  height: 1.375rem;
+  padding: 0.1rem 0.625rem;
+  align-items: center;
+  flex-direction: row;
+  gap: 0.25rem;
+`;
+
+export const StatusTagStyles = styled(BaseTagStyles)``;
+
+export const ProposedCODTagStyles = styled(BaseTagStyles)`
+  border-left: none;
+  border-top: none;
+  border-bottom: none;
+`;
+
+export const CODTagStyles = styled.div`
+  display: inline-flex;
+  height: 1.375rem;
+  align-items: center;
+  flex-direction: row;
+  gap: 0.25rem;
+  white-space: nowrap;
+`;
+
+export const AllTagStyles = styled(BaseTagStyles)`
+  padding-left: 0rem;
+  gap: 0.375rem;
+`;

components/TechnologyTag/index.tsx

@@ -0,0 +1,44 @@
+import {
+  EnergyStorageIcon,
+  GeothermalIcon,
+  HydroelectricIcon,
+  LandBasedWindIcon,
+  OffshoreWindIcon,
+  PumpedStorageIcon,
+  SolarPvIcon,
+} from '../../assets/Technology-Tag-Icons/icons';
+import COLORS from '../../styles/colors';
+import { TagText1 } from '../../styles/texts';
+import { TechnologyTagStyles } from './styles';
+
+export default function TechnologyTag({
+  technology,
+}: {
+  technology: string | undefined;
+}) {
+  const iconMap: { [key: string]: JSX.Element } = {
+    'Offshore Wind': (
+      <OffshoreWindIcon fill={COLORS.electricBlue} stroke={COLORS.navy} />
+    ),
+    'Energy Storage': (
+      <EnergyStorageIcon fill={COLORS.teal} stroke={COLORS.white} />
+    ),
+    Geothermal: <GeothermalIcon fill={COLORS.earthyGreen} />,
+    Hydroelectric: <HydroelectricIcon fill={COLORS.frenchBlue} />,
+    'Land-Based Wind': <LandBasedWindIcon fill={COLORS.skyBlue} />,
+    'Pumped Storage': <PumpedStorageIcon fill={COLORS.cyanBlue} />,
+    'Solar PV': <SolarPvIcon fill={COLORS.yellow} />,
+  };
+
+  const icon = technology ? iconMap[technology] : null;
+
+  return (
+    <div>
+      {icon && (
+        <TechnologyTagStyles>
+          {icon} <TagText1>{technology}</TagText1>
+        </TechnologyTagStyles>
+      )}
+    </div>
+  );
+}

components/TechnologyTag/styles.ts

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+export const TechnologyTagStyles = styled.div`
+  border-radius: 6.25rem;
+  border: 0.031rem solid rgba(46, 58, 89, 0.25);
+  display: inline-flex;
+  height: 1.375rem;
+  padding: 0.1rem 0.625rem;
+  align-items: center;
+  flex-direction: row;
+  gap: 0.375rem;
+`;

styles/colors.ts

@@ -1,16 +1,22 @@
 const COLORS = {
+  lightOrange: '#FFF9DF',
+  orange: '#D4874D',
+  yellow: '#FFBE54',
+  lightGreen: '#E8FFEF',
+  green: '#0E7B30',
+  earthyGreen: '#4D8B31',
   navy: '#2E3A59',
   electricBlue: '#4974E0',
   lightBlue: '#92ACED',
-  green: '#0E7B30',
-  white: '#FFFFFF',
-  orange: '#D4874D',
-  grey: '#525454',
-  lightGreen: '#E8FFEF',
+  teal: '#4896BC',
+  frenchBlue: '#0072BB',
+  skyBlue: '#96CEE5',
+  cyanBlue: '#68C6E2',
   veryLightGrey: '#F4F4F4',
-  lightOrange: '#FFF9DF',
-  black: '#000000',
   lightGrey: '#D9D9D9',
+  grey: '#525454',
+  black: '#000000',
+  white: '#FFFFFF',
 };
 
 export default COLORS;