feat: add coming soon label

Plant-for-the-Planet-org · Mar 15, 2024 · e30e5b9 · e30e5b9
1 parent ec7cf49
commit e30e5b9
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 6 deletions.
diff --git a/public/static/locales/en/projectDetails.json b/public/static/locales/en/projectDetails.json
@@ -8,5 +8,6 @@
     "speciesDensity": "Species Density",
     "projectBegin": "Since project begin",
     "avg": "Average",
-    "tons": "tons"
+    "tons": "tons",
+    "comingSoon": "coming soon"
 }
diff --git a/src/temp/VegetationChangeDatabox/Dropdown.tsx b/src/temp/VegetationChangeDatabox/Dropdown.tsx
@@ -21,26 +21,32 @@ const Dropdown = ({ labelIcon, labelTitle, isOpen }: Props) => {
     {
       icon: <BiomassChangeIcon />,
       title: t('biomassChange'),
-    },
-    {
-      icon: <PotentialBiomassIcon />,
-      title: t('potentialBiomass'),
+      isFeaturePending: false,
     },
     {
       icon: <TreeCoverIcon />,
       title: t('treeCover'),
+      isFeaturePending: false,
+    },
+    {
+      icon: <PotentialBiomassIcon />,
+      title: t('potentialBiomass'),
+      isFeaturePending: true,
     },
     {
       icon: <FireIcon />,
       title: t('fireRisk'),
+      isFeaturePending: true,
     },
     {
       icon: <FloodingRiskIcon />,
       title: t('floodingRisk'),
+      isFeaturePending: true,
     },
     {
       icon: <SpeciesDensityIcon />,
       title: t('speciesDensity'),
+      isFeaturePending: true,
     },
   ];
   const [selectedOption, setSelectedOption] = useState({
@@ -63,7 +69,10 @@ const Dropdown = ({ labelIcon, labelTitle, isOpen }: Props) => {
                 }`}
               >
                 <div className={styles.optionIcon}>{option.icon}</div>
-                <p>{option.title}</p>
+                <div className={styles.optionLabel}>
+                  <p>{option.title}</p>
+                  {option.isFeaturePending && <span>{t('comingSoon')}</span>}
+                </div>
               </li>
             ))}
           </ul>

diff --git a/src/temp/VegetationChangeDatabox/VegetationChangeDatabox.module.scss b/src/temp/VegetationChangeDatabox/VegetationChangeDatabox.module.scss
@@ -65,6 +65,15 @@
         align-items: center;
         justify-content: center;
     }
+    .optionLabel {
+        display: flex;
+        flex-direction: column;
+        span {
+            font-size: 4px;
+            letter-spacing: 1.48px;
+            text-transform: uppercase;
+        }
+    }
 }
 .selected {
     border-radius: 4px;