feat: combine all components to form databox

src/temp/VegetationChangeDatabox/Databox.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import styles from './VegetationChangeDatabox.module.scss';
+import Dropdown from './Dropdown';
+import BiomassChangeIcon from '../icons/BiomassChangeIcon';
+import VegetationSlider from './VegetationSlider';
+import NewInfoIcon from '../icons/NewInfoIcon';
+const Databox = ({ startYear }) => {
+  return (
+    <div className={styles.databoxContainer}>
+      <div className={styles.dropdownInfoContainer}>
+        <Dropdown
+          labelIcon={<BiomassChangeIcon />}
+          labelTitle={'Biomass Change'}
+          isOpen={false}
+        />
+        <p className={styles.startYearText}>Since project begin {startYear}</p>
+      </div>
+      <div className={styles.divider}></div>
+      <div className={styles.sliderInfoContainer}>
+        <VegetationSlider position={5} />
+        <div className={styles.infoIcon}>
+          <NewInfoIcon height={10} width={10} color={'#BDBDBD'} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Databox;

src/temp/VegetationChangeDatabox/VegetationChangeDatabox.module.scss

@@ -1,6 +1,24 @@
 @import '../../theme/theme';
+.databoxContainer {
+    display: flex;
+    width: fit-content;
+    padding: 12px 8px;
+    background-color: #fff;
+    align-items: center;
+    border-radius: 12px;
+    position: relative;
+    margin-top: 60vh; //to be removed
+    gap: 24px;
+
+}
+
+.startYearText {
+    font-size: 8px;
+    margin-top: 4px;
+    color: #828282;
+}
+
 .menuButton {
-    width: 150px;
     background-color: #F2F2F2;
     border-radius: 4px;
     padding: 7px 9px;
@@ -9,10 +27,13 @@
     justify-content: space-between;
     font-size: 10px;
     font-weight: 700;
+    gap: 22px;
+    // margin-right: 12px; 
     .label {
         display: flex;
         gap: 7px;
         align-items: center;
+        justify-content: center;
     }
 
 }
@@ -22,12 +43,13 @@
     align-items: center;
 }
 .itemsContainer {
-    margin-bottom: 8px;
+    position: absolute;
+    bottom: 97px;
     padding:12px;
     background-color: #fff;
-    width: 145px;
     border-radius: 4px;
     font-size: 10px;
+    width: 124px;
 }
 .menuItem {
     display: flex;
@@ -40,4 +62,23 @@
     background-color: #F2F2F2;
     font-weight: 700;
     padding: 6px 7px;
+}
+
+.divider {
+    position: absolute;
+    width: 1px;
+    height: 100%;
+    background-color: #E0E0E0;
+    top: 0;
+    left: 170px;
+
+}
+.sliderInfoContainer {
+    display: flex;
+    padding: 12px 10px 12px 0;
+}
+.infoIcon {
+    position: absolute;
+    right: 6px;
+    top: 1px;
 }

src/temp/stories/Databox.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Databox from '../VegetationChangeDatabox/Databox';
+
+const meta: Meta<typeof Databox> = {
+  component: Databox,
+};
+
+export default meta;
+type Story = StoryObj<typeof Databox>;
+
+export const Preview: Story = {
+  args: {
+    startYear: 2018,
+  },
+};