feat: add main area

it already reacts to change in header's time-selector

src/App.jsx

@@ -10,7 +10,7 @@ export default function () {
   return (
     <>
       <UserCard time={time} setTime={setTime} timeList={timeList} />
-      <MainBody time={time} setTime={setTime} timeList={timeList} />
+      <MainBody time={time} />
     </>
   );
 }

src/IconIndex.jsx

@@ -0,0 +1,15 @@
+import work from "./assets/images/icon-work.svg";
+import play from "./assets/images/icon-play.svg";
+import study from "./assets/images/icon-study.svg";
+import exercise from "./assets/images/icon-exercise.svg";
+import social from "./assets/images/icon-social.svg";
+import selfCare from "./assets/images/icon-self-care.svg";
+
+export default {
+  Work: work,
+  Play: play,
+  Study: study,
+  Exercise: exercise,
+  Social: social,
+  "Self Care": selfCare,
+};

src/MainBody.jsx

@@ -1,9 +1,45 @@
 import "./MainBody.css";
+import data from "./assets/data.json";
+import Icons from "./IconIndex";
+import ellipsis from "./assets/images/icon-ellipsis.svg";
+
+export default function (props) {
+  const selectedTime = props.time;
+  const lyToNormal = {
+    // this is used to convert daily to weekly etc
+    daily: "day",
+    weekly: "week",
+    monthly: "month",
+  };
 
-export default function () {
   return (
     <main>
-      <div></div>
+      {data.map((value, index) => (
+        <div className="activity" key={index}>
+          <div className="activity__icon">
+            <img src={Icons[value.title]} alt="" />
+          </div>
+
+          <div className="activity__details">
+            <div className="activity__deatils__top">
+              <div className="activity__deatils__top__title">{value.title}</div>
+              <div className="activity__deatils__top__menu">
+                <img src={ellipsis} alt="" />
+              </div>
+            </div>
+
+            <div className="activity__deatils__time">
+              <span className="activity__details__time__current">
+                {value.timeframes[selectedTime].current}hrs
+              </span>
+              <span className="activity__details__time__previous">
+                Last {lyToNormal[selectedTime]} -
+                {value.timeframes[selectedTime].previous}hrs
+              </span>
+            </div>
+          </div>
+        </div>
+      ))}
     </main>
   );
 }