chore: creating dropdown for selecting Timelines and styling the Time…

…line area
NikolaVetnic · Jan 14, 2025 · 008b1d8 · 008b1d8
1 parent d69cb84
commit 008b1d8
Show file tree

Hide file tree

Showing 7 changed files with 411 additions and 19 deletions.
diff --git a/Frontend/react-app/package-lock.json b/Frontend/react-app/package-lock.json
diff --git a/Frontend/react-app/package.json b/Frontend/react-app/package.json
@@ -9,7 +9,8 @@
     "react-datepicker": "^7.6.0",
     "react-dom": "^19.0.0",
     "react-icons": "^5.4.0",
-    "react-scripts": "5.0.1"
+    "react-scripts": "5.0.1",
+    "react-select": "^5.9.0"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/Frontend/react-app/src/App.jsx b/Frontend/react-app/src/App.jsx
@@ -1,12 +1,21 @@
 import React from "react";
+
 import "./styles/App.css";
+
 import Timeline from "./components/Timeline/Timeline";
+import TimelineSelect from "./components/TimelineSelect/TimelineSelect";
 
 function App() {
+    const handleTimelineSelect = (selectedTimeline) => {
+        // console.log("Selected Timeline:", selectedTimeline);
+    };
+
     return (
-        <div className="App">
-            <h1>My Timeline</h1>
-            <Timeline />
+        <div className="app-container">
+            <div className="app-content">
+                <TimelineSelect onTimelineSelect={handleTimelineSelect} />
+                <Timeline />
+            </div>
         </div>
     );
 }