49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import { useMatches, KBarResults } from "kbar";
|
|
import { orderBy } from "lodash";
|
|
import * as React from "react";
|
|
import styled from "styled-components";
|
|
import CommandBarItem from "~/components/CommandBarItem";
|
|
import { SearchSection } from "~/actions/sections";
|
|
|
|
type Props = {
|
|
prioritizeSearchResults: boolean;
|
|
};
|
|
|
|
export default function CommandBarResults(props: Props) {
|
|
const { results, rootActionId } = useMatches();
|
|
|
|
return (
|
|
<KBarResults
|
|
items={orderBy(results, (item) =>
|
|
// this is an unfortunate hack until kbar supports priority internally
|
|
typeof item !== "string" &&
|
|
item.section === SearchSection &&
|
|
props.prioritizeSearchResults
|
|
? -1
|
|
: 1
|
|
)}
|
|
maxHeight={400}
|
|
onRender={({ item, active }) =>
|
|
typeof item === "string" ? (
|
|
<Header>{item}</Header>
|
|
) : (
|
|
<CommandBarItem
|
|
action={item}
|
|
active={active}
|
|
currentRootActionId={rootActionId}
|
|
/>
|
|
)
|
|
}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const Header = styled.h3`
|
|
font-size: 13px;
|
|
letter-spacing: 0.04em;
|
|
margin: 0;
|
|
padding: 16px 0 4px 20px;
|
|
color: ${(props) => props.theme.textTertiary};
|
|
height: 36px;
|
|
`;
|