dropdown update

Author: yujinkay

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "reactime-extension",
+  "name": "reactime",
   "description": "build web extension bundle.js",
   "scripts": {
     "build": "webpack --mode production",
@@ -26,7 +26,7 @@
     "David Chai",
     "Josh Kim",
     "Ruthba Anam",
-    "Ryan Dang", 
+    "Ryan Dang",
     "Sierra Swaby",
     "Yujin Kang"
   ],

package.json

@@ -5,14 +5,25 @@ import Select from 'react-select';
 // and specific states being used
     // TODO: Need to get the getter name (for functional components) 
     // and state name for stateful components 
-const SwitchStateDropdown = props => {
+const SwitchStateDropdown = () => {
     // Requirements: 
-        // Need to be able to filter by state name 
-        // The way state name gets imported needs to be checked 
+        // Should be able to filter the Actions by the name of the state being changed
+        // Should consider how to import the state names being changed 
+        // Should display the "All state", as well as specific state names as the options
+        // When clicked on "All state" >> should display all Actions
+        // When clicked on a specific "state" >> should only display Actions corresponding to the state
+
+    const sampleDropdown = [
+        {label: 'Overview'}, 
+        {label: 'setUsername'}, 
+        {label: 'setPassword'}
+    ]; 
+
     return (
-        <Select className="state-dropdown" 
+        <Select 
+        className="state-dropdown" 
         placeholder="Choose your state" 
-        options={}
+        options={sampleDropdown}
         />
     )
 }

src/app/components/SwitchState.jsx

@@ -3,6 +3,11 @@
   width: 120px;
 }
 
+.state-dropdown {
+  width: 240px; 
+  margin-left: 20px; 
+}
+
 .action-component:hover .jump-button {
   opacity: 1;
   transform: rotateX(0deg);