chore: footer on search

Author: ovflowd

src/generators/web/ui/components/SearchBox/index.jsx

@@ -1,18 +1,52 @@
+import {
+  ArrowDownIcon,
+  ArrowTurnDownLeftIcon,
+  ArrowUpIcon,
+} from '@heroicons/react/24/solid';
 import SearchModal from '@node-core/ui-components/Common/Search/Modal';
 import SearchResults from '@node-core/ui-components/Common/Search/Results';
 import SearchHit from '@node-core/ui-components/Common/Search/Results/Hit';
 
+import styles from './index.module.css';
 import useOrama from '../../hooks/useOrama.mjs';
 
 const SearchBox = () => {
   const client = useOrama();
 
   return (
-    <SearchModal client={client} placeholder={'Start typing...'}>
-      <SearchResults
-        noResultsTitle={'No results found for'}
-        onHit={hit => <SearchHit document={hit.document} />}
-      />
+    <SearchModal client={client} placeholder="Start typing...">
+      <div className={styles.searchResultsContainer}>
+        <SearchResults
+          noResultsTitle="No results found for"
+          onHit={hit => <SearchHit document={hit.document} />}
+        />
+      </div>
+
+      <div className={styles.footer}>
+        <div className={styles.shortcutWrapper}>
+          <div className={styles.shortcutItem}>
+            <kbd className={styles.shortcutKey}>
+              <ArrowTurnDownLeftIcon />
+            </kbd>
+            <span className={styles.shortcutLabel}>to select</span>
+          </div>
+
+          <div className={styles.shortcutItem}>
+            <kbd className={styles.shortcutKey}>
+              <ArrowDownIcon />
+            </kbd>
+            <kbd className={styles.shortcutKey}>
+              <ArrowUpIcon />
+            </kbd>
+            <span className={styles.shortcutLabel}>to navigate</span>
+          </div>
+
+          <div className={styles.shortcutItem}>
+            <kbd className={styles.shortcutKey}>esc</kbd>
+            <span className={styles.shortcutLabel}>to close</span>
+          </div>
+        </div>
+      </div>
     </SearchModal>
   );
 };

src/generators/web/ui/components/SearchBox/index.module.css

@@ -0,0 +1,76 @@
+.searchResultsContainer {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.footer {
+  display: flex;
+  justify-content: center;
+  align-items: baseline;
+  padding: 1rem;
+  border-top: 1px solid var(--color-neutral-200);
+  background-color: var(--color-neutral-100);
+}
+
+:where([data-theme='dark'], [data-theme='dark'] *) .footer {
+  border-top-color: var(--color-neutral-900);
+  background-color: var(--color-neutral-950);
+}
+
+@media (min-width: 1024px) {
+  .footer {
+    justify-content: space-between;
+    border-radius: 0 0 0.75rem 0.75rem;
+  }
+}
+
+.shortcutWrapper {
+  display: none;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+@media (min-width: 1024px) {
+  .shortcutWrapper {
+    display: flex;
+  }
+}
+
+.shortcutItem {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--color-neutral-800);
+}
+
+:where([data-theme='dark'], [data-theme='dark'] *) .shortcutItem {
+  color: var(--color-neutral-600);
+}
+
+.shortcutKey {
+  font-family: var(--font-ibm-plex-mono);
+  border-radius: 0.375rem;
+  background-color: var(--color-neutral-200);
+  padding: 0.25rem;
+  font-size: 0.75rem;
+}
+
+:where([data-theme='dark'], [data-theme='dark'] *) .shortcutKey {
+  background-color: var(--color-neutral-900);
+}
+
+.shortcutKey svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.shortcutLabel {
+  color: var(--color-neutral-800);
+}
+
+:where([data-theme='dark'], [data-theme='dark'] *) .shortcutLabel {
+  color: var(--color-neutral-600);
+}