45 lines
1.0 KiB
JavaScript
45 lines
1.0 KiB
JavaScript
// @flow
|
|
import { useMatches, KBarResults, NO_GROUP } from "kbar";
|
|
import * as React from "react";
|
|
import styled from "styled-components";
|
|
import CommandBarItem from "components/CommandBarItem";
|
|
|
|
export default function CommandBarResults() {
|
|
const matches = useMatches();
|
|
const items = React.useMemo(
|
|
() =>
|
|
matches
|
|
.reduce((acc, curr) => {
|
|
const { actions, name } = curr;
|
|
acc.push(name);
|
|
acc.push(...actions);
|
|
return acc;
|
|
}, [])
|
|
.filter((i) => i !== NO_GROUP),
|
|
[matches]
|
|
);
|
|
|
|
return (
|
|
<KBarResults
|
|
items={items}
|
|
maxHeight={400}
|
|
onRender={({ item, active }) =>
|
|
typeof item === "string" ? (
|
|
<Header>{item}</Header>
|
|
) : (
|
|
<CommandBarItem action={item} active={active} />
|
|
)
|
|
}
|
|
/>
|
|
);
|
|
}
|
|
|
|
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;
|
|
`;
|