From e30e5b99d13d2e8eb09add98a7d1409d091ef7d9 Mon Sep 17 00:00:00 2001
From: prachigarg19 <72646230+prachigarg19@users.noreply.github.com>
Date: Fri, 15 Mar 2024 18:28:00 +0530
Subject: [PATCH] feat: add coming soon label

---
 public/static/locales/en/projectDetails.json  |  3 ++-
 src/temp/VegetationChangeDatabox/Dropdown.tsx | 19 ++++++++++++++-----
 .../VegetationChangeDatabox.module.scss       |  9 +++++++++
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/public/static/locales/en/projectDetails.json b/public/static/locales/en/projectDetails.json
index 7e438c7b61..7ee7b5dbb8 100644
--- 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"
 }
\ No newline at end of file
diff --git a/src/temp/VegetationChangeDatabox/Dropdown.tsx b/src/temp/VegetationChangeDatabox/Dropdown.tsx
index e6942f30da..c803804848 100644
--- 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
index 747d024460..3743cf1c7b 100644
--- 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;