Added Drop Down Menu by Ron Manguerra

src/App.jsx

@@ -10,6 +10,7 @@ import AccordionItems from "./components/kelixirr/AccordionItems";
 import FlashCards from "./components/mektefaie/FlashCards";
 import SliderCards from "./components/kelixirr/SliderCards";
 import Modal from "./components/sushantpokhrel/Modal";
+import DropDown from "./components/ronforrestron24/DropDown";
 function App() {
   const [showToast, setShowToast] = useState(false);
   const [progress] = useState(0);
@@ -26,6 +27,7 @@ function App() {
       <FlashCards />
       <SliderCards />
       <Modal />
+      <DropDown />
       {/* Please Add Your Component Above This Line. Don't Add Div inside App, just component. Keep It Clean*/}
       <div
         style={{
@@ -48,7 +50,6 @@ function App() {
           />
         )}
       </div>
-
     </>
   );
 }

src/components/ronforrestron24/DropDown.css

@@ -0,0 +1,45 @@
+.dropdown-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh; /* Adjust as needed */
+  background-color: #f9f9f9; /* Light background color */
+}
+
+.dropdown {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  background-color: #fff;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.dropdown label {
+  margin-bottom: 8px;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.dropdown select {
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #f0f0f0;
+  cursor: pointer;
+  font-size: 16px;
+  margin-bottom: 16px;
+}
+
+.dropdown select:focus {
+  outline: none;
+  border-color: #007bff;
+}
+
+.author {
+  margin-top: 16px;
+  font-size: 14px;
+  color: #555;
+}

src/components/ronforrestron24/DropDown.jsx

@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import styles from "./DropDown.css";
+import Author from "../../Author";
+
+function DropDown() {
+  const [selectedOption, setSelectedOption] = useState("");
+
+  function handleChange(e) {
+    setSelectedOption(e.target.value);
+  }
+
+  return (
+    <div className="dropdown-container">
+      <div className="dropdown">
+        <label htmlFor="dropdown">Select Option:</label>
+        <select id="dropdown" value={selectedOption} onChange={handleChange}>
+          <option value="">Please select</option>
+          <option value="option1">Option 1</option>
+          <option value="option2">Option 2</option>
+          <option value="option3">Option 3</option>
+          <option value="option4">Option 4</option>
+        </select>
+        <div className="author">
+          <Author
+            name="Ron Daniel Manguerra"
+            githubLink="https://github.com/ronforrestron24"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default DropDown;