Function DetailsPanel

packages/hotkeys-devtools/src/components/DetailsPanel.tsx:781–829

(props: DetailsPanelProps)

}

export function DetailsPanel(props: DetailsPanelProps) {
  const styles = useStyles()
  const state = useHotkeysDevtoolsState()

  return (
    <div class={styles().stateDetails}>
      <Show
        when={props.selectedRegistration()}
        fallback={
          <div class={styles().noSelection}>
            Select a hotkey or sequence from the list to view its details
          </div>
        }
      >
        {(reg) => (
          <Show
            when={isSequenceRegistration(reg())}
            fallback={
              <HotkeyDetails
                registration={reg() as HotkeyRegistration}
                state={state}
                getTargetDescription={getTargetDescription}
                findTargetConflicts={findTargetConflicts}
                findScopeConflicts={findScopeConflicts}
                getConflictItemStyle={getConflictItemStyle}
                getConflictLabel={getConflictLabel}
                formatForDisplay={formatForDisplay}
                styles={styles}
              />
            }
          >
            <SequenceDetails
              registration={reg() as SequenceRegistrationView}
              state={state}
              getTargetDescription={getTargetDescription}
              findSequenceTargetConflicts={findSequenceTargetConflicts}
              findSequenceScopeConflicts={findSequenceScopeConflicts}
              getConflictItemStyle={getConflictItemStyle}
              getConflictLabel={getConflictLabel}
              formatHotkeySequence={formatHotkeySequence}
              formatForDisplay={formatForDisplay}
              styles={styles}
            />
          </Show>
        )}
      </Show>
    </div>
  )
}