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
-            type="text"
-            className="border border-gray-300 rounded p-2 w-full focus:border-blue-300 focus:outline-none focus:shadow-outline-blue"
+          <Dropdown
             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;