Add dropdown for status in Deployments tab panel (#5)

* Implement and use dropdown component

* Handle state of dropdown

---------

Co-authored-by: neeraj <neeraj.rtly@gmail.com>

packages/frontend/package.json

@@ -13,6 +13,7 @@
     "luxon": "^3.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-dropdown": "^1.11.0",
     "react-hook-form": "^7.49.0",
     "react-router-dom": "^6.20.1",
     "react-scripts": "5.0.1",

packages/frontend/src/components/Deployments.tsx

@@ -2,6 +2,12 @@ import React from 'react';
 
 import deploymentDetails from '../assets/deployments.json';
 import DeployDetailsCard from './DeploymentDetailsCard';
+import Dropdown from './Dropdown';
+
+const statusOptions = [
+  { value: 'production', label: 'Production' },
+  { value: 'preview', label: 'Preview' },
+];
 
 const Deployments = () => {
   return (
@@ -22,10 +28,10 @@ const Deployments = () => {
           />
         </div>
         <div className="col-span-1">
-          <input
+          <Dropdown
-            type="text"
-            className="border border-gray-300 rounded p-2 w-full focus:border-blue-300 focus:outline-none focus:shadow-outline-blue"
             placeholder="All status"
+            options={statusOptions}
+            handler={() => {}}
           />
         </div>
       </div>

packages/frontend/src/components/Dropdown.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {
+  default as ReactDropdown,
+  Option as ReactDropdownOption,
+} from 'react-dropdown';
+import 'react-dropdown/style.css';
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+interface DropdownProps {
+  placeholder: string;
+  options: Option[];
+  handler: (arg: ReactDropdownOption) => void;
+}
+
+const Dropdown = ({ placeholder, options, handler }: DropdownProps) => {
+  return (
+    <ReactDropdown
+      options={options}
+      placeholder={placeholder}
+      className="h-full"
+      controlClassName="h-full"
+      onChange={handler}
+    />
+  );
+};
+
+export default Dropdown;

yarn.lock

@@ -3982,6 +3982,11 @@ cjs-module-lexer@^1.0.0:
   resolved "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz"
   integrity sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==
 
+classnames@^2.2.3:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
 clean-css@^5.2.2:
   version "5.3.3"
   resolved "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz"
@@ -10160,6 +10165,13 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-dropdown@^1.11.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/react-dropdown/-/react-dropdown-1.11.0.tgz#b9576de17efd28e5684d101b3f58dfe784af242c"
+  integrity sha512-E2UWetRPxNdIhQahXw6b984ME7WmcgDj9AEAjrtS/oyLCFVo+2qkCfcS06C22JR0Zj+YLnygwv0Ozf6VKKDq7g==
+  dependencies:
+    classnames "^2.2.3"
+
 react-error-overlay@^6.0.11:
   version "6.0.11"
   resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz"