feat: add CommandBar component with keyboard shortcuts and navigation

Author: AbhishekA1509

src/Pages/Shared/CommandBar/CommandBar.component.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useState } from 'react'
+
+import { Backdrop, KeyboardShortcut, SearchBar, useRegisterShortcut } from '@devtron-labs/devtron-fe-common-lib'
+
+import { SHORT_CUTS } from './constants'
+
+import './CommandBar.scss'
+
+const CommandBar = () => {
+    const [showCommandBar, setShowCommandBar] = useState(false)
+
+    const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
+
+    const handleClose = () => {
+        setShowCommandBar(false)
+    }
+
+    const handleOpen = () => {
+        setShowCommandBar(true)
+    }
+
+    useEffect(() => {
+        registerShortcut({
+            keys: SHORT_CUTS.OPEN_COMMAND_BAR.keys,
+            description: 'Open Command Bar',
+            callback: handleOpen,
+        })
+
+        return () => {
+            unregisterShortcut(SHORT_CUTS.OPEN_COMMAND_BAR.keys)
+        }
+    }, [])
+
+    if (!showCommandBar) {
+        return null
+    }
+
+    return (
+        <Backdrop onEscape={handleClose}>
+            <div className="dc__mxw-800 mxh-450 flexbox-col dc__overflow-auto dc__content-space br-12 bg__modal--primary command-bar__container w-100 h-100">
+                <div className="flexbox-col dc__overflow-auto">
+                    <SearchBar
+                        inputProps={{
+                            autoFocus: true,
+                            placeholder: 'Search or jump to…',
+                        }}
+                        noBackgroundAndBorder
+                    />
+
+                    <div className="flexbox-col dc__overflow-auto border__primary--top pt-8" />
+                </div>
+
+                <div className="flexbox dc__content-space dc__align-items-center px-20 py-12 border__primary--top bg__secondary">
+                    <div className="flexbox dc__gap-20 dc__align-items-center">
+                        <div className="flexbox dc__gap-8 dc__align-items-center">
+                            <KeyboardShortcut keyboardKey="ArrowUp" />
+                            <KeyboardShortcut keyboardKey="ArrowDown" />
+                            <span className="cn-9 fs-12 fw-4 lh-20">to navigate</span>
+                        </div>
+
+                        <div className="flexbox dc__gap-8 dc__align-items-center">
+                            <KeyboardShortcut keyboardKey="Enter" />
+                            <span className="cn-9 fs-12 fw-4 lh-20">to select</span>
+                        </div>
+
+                        <div className="flexbox dc__gap-8 dc__align-items-center">
+                            <KeyboardShortcut keyboardKey="Escape" />
+                            <span className="cn-9 fs-12 fw-4 lh-20">to close</span>
+                        </div>
+                    </div>
+
+                    <div className="flexbox dc__gap-8 dc__align-items-center">
+                        <KeyboardShortcut keyboardKey=">" />
+                        <span className="cn-9 fs-12 fw-4 lh-20">to search actions</span>
+                    </div>
+                </div>
+            </div>
+        </Backdrop>
+    )
+}
+
+export default CommandBar

src/Pages/Shared/CommandBar/CommandBar.scss

@@ -0,0 +1,5 @@
+.command-bar {
+    &__container {
+        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.04), 0 2px 8px 0 rgba(0, 0, 0, 0.04), 0 3px 17px 0 rgba(0, 0, 0, 0.04), 0 4px 30px 0 rgba(0, 0, 0, 0.13), 0 8px 48px 0 rgba(0, 0, 0, 0.15);
+    }
+}