website: QL Search keyboard interactions docs, examples. (#16259)

* website: Flesh out keyboard interactions docs, examples.

* Update doc

* Fix links and apply suggestions

---------

Co-authored-by: dewi-tik <dewi@goauthentik.io>

website/docusaurus-theme/components/KeyBindingsTable/index.tsx

@@ -0,0 +1,42 @@
+import styles from "./styles.module.css";
+
+export type KeyBindingGroup = [label: React.ReactNode, bindings: KeyBinding[]];
+
+export type KeyBinding = [label: React.ReactNode, key: React.ReactNode];
+
+export interface KeyBindingsTableProps extends React.HTMLAttributes<HTMLTableElement> {
+    bindings?: KeyBindingGroup[];
+}
+
+export const KeyBindingsTable: React.FC<KeyBindingsTableProps> = ({ bindings = [], ...props }) => {
+    return (
+        <table className={styles.table} {...props}>
+            <thead>
+                <tr>
+                    <th className={styles.actionColumn} scope="col" id="key-col-action">
+                        Action
+                    </th>
+                    <th className={styles.bindingColumn} scope="col" id="key-col-binding">
+                        Key Binding
+                    </th>
+                </tr>
+            </thead>
+
+            {bindings.map(([label, bindings], groupIndex) => (
+                <tbody key={groupIndex}>
+                    <tr>
+                        <th colSpan={2} scope="rowgroup">
+                            {label}
+                        </th>
+                    </tr>
+                    {bindings.map(([label, key], bindingIndex) => (
+                        <tr key={`${groupIndex}-${bindingIndex}`}>
+                            <td>{label}</td>
+                            <td>{key}</td>
+                        </tr>
+                    ))}
+                </tbody>
+            ))}
+        </table>
+    );
+};

website/docusaurus-theme/components/KeyBindingsTable/styles.module.css

@@ -0,0 +1,55 @@
+.table {
+    width: 100%;
+
+    --ifm-table-border-color: var(--ifm-color-info-contrast-background);
+    --ifm-table-stripe-background: transparent;
+    --ifm-table-stripe-background: var(--ifm-color-emphasis-100);
+
+    thead {
+        background-color: var(--ifm-color-info-contrast-background);
+        text-align: left;
+    }
+
+    tr,
+    td,
+    th {
+        border-color: transparent;
+    }
+
+    tr {
+        th {
+            border-block-end-color: var(--ifm-color-info-contrast-background);
+        }
+
+        td:first-child {
+            text-align: end;
+
+            font-family: var(--ifm-heading-font-family);
+            font-weight: 300;
+            border-inline-end-color: var(--ifm-color-secondary-dark);
+        }
+    }
+
+    tbody tr th {
+        --ifm-table-cell-padding: 0.5rem;
+        font-weight: 600;
+        font-family: var(--ifm-heading-font-family);
+        text-align: end;
+        background-color: transparent;
+    }
+
+    kbd {
+        user-select: none;
+        text-rendering: optimizeLegibility;
+        font-weight: 900;
+        letter-spacing: 0.05em;
+        padding: 0.25rem 0.25rem;
+    }
+    .actionColumn {
+        min-width: 20rem;
+    }
+
+    .bindingColumn {
+        width: 100%;
+    }
+}