46 lines
1.0 KiB
TypeScript
46 lines
1.0 KiB
TypeScript
import { useMatches, KBarResults } from "kbar";
|
|
import * as React from "react";
|
|
import styled from "styled-components";
|
|
import { s } from "@shared/styles";
|
|
import CommandBarItem from "~/components/CommandBarItem";
|
|
|
|
export default function CommandBarResults() {
|
|
const { results, rootActionId } = useMatches();
|
|
|
|
return (
|
|
<Container>
|
|
<KBarResults
|
|
items={results}
|
|
maxHeight={400}
|
|
onRender={({ item, active }) =>
|
|
typeof item === "string" ? (
|
|
<Header>{item}</Header>
|
|
) : (
|
|
<CommandBarItem
|
|
action={item}
|
|
active={active}
|
|
currentRootActionId={rootActionId}
|
|
/>
|
|
)
|
|
}
|
|
/>
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
// Cannot style KBarResults unfortunately, so we must wrap and target the inner
|
|
const Container = styled.div`
|
|
> div {
|
|
padding-bottom: 8px;
|
|
}
|
|
`;
|
|
|
|
const Header = styled.h3`
|
|
font-size: 13px;
|
|
letter-spacing: 0.04em;
|
|
margin: 0;
|
|
padding: 16px 0 4px 20px;
|
|
color: ${s("textTertiary")};
|
|
height: 36px;
|
|
`;
|