strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine cmdk item spacing

Browse Source
This commit is contained in:
Sam Becker 2025-03-19 21:23:59 -05:00
parent ee98668727
commit e8c52db29a
1 changed files with 90 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
src/components/cmdk/CommandKClient.tsx
View File

@ -570,97 +570,99 @@ export default function CommandKClient({
// eslint-disable-next-line max-len
maskImage: 'linear-gradient(to bottom, transparent, black 20px, black calc(100% - 20px), transparent)',
}}>
<Command.Empty className="mt-1 pl-3 text-dim">
{isLoading ? 'Searching ...' : 'No results found'}
</Command.Empty>
<div className="space-y-2.5">
{queriedSections
.concat(categorySections)
.concat(sectionPages)
.concat(adminSection)
.concat(clientSections)
.filter(({ items }) => items.length > 0)
.map(({ heading, accessory, items }) =>
<Command.Group
key={heading}
heading={<div className={clsx(
'flex items-center',
'px-2 pb-0.5',
isPending && 'opacity-20',
)}>
{accessory &&
<div className="w-5">{accessory}</div>}
{heading}
</div>}
className={clsx(
'uppercase',
'select-none',
'[&>*:first-child]:py-1',
'[&>*:first-child]:font-medium',
'[&>*:first-child]:text-dim',
'[&>*:first-child]:text-xs',
'[&>*:first-child]:tracking-wider',
)}
>
{items.map(({
label,
explicitKey,
keywords,
accessory,
annotation,
annotationAria,
path,
action,
}) => {
const key = `${heading} ${explicitKey ?? label}`;
return <CommandKItem
key={key}
label={label}
value={key}
keywords={keywords}
onSelect={() => {
if (action) {
const result = action();
if (result instanceof Promise) {
setKeyWaiting(key);
setIsWaitingForAction(true);
result.then(shouldClose => {
shouldCloseAfterWaiting.current =
shouldClose === true;
setIsWaitingForAction(false);
});
} else {
if (!path) { setIsOpen?.(false); }
<div className="pb-1 md:pb-2">
<Command.Empty className="mt-1 pl-3 text-dim pb-4">
{isLoading ? 'Searching ...' : 'No results found'}
</Command.Empty>
<div className="space-y-2.5">
{queriedSections
.concat(categorySections)
.concat(sectionPages)
.concat(adminSection)
.concat(clientSections)
.filter(({ items }) => items.length > 0)
.map(({ heading, accessory, items }) =>
<Command.Group
key={heading}
heading={<div className={clsx(
'flex items-center',
'px-2 pb-0.5',
isPending && 'opacity-20',
)}>
{accessory &&
<div className="w-5">{accessory}</div>}
{heading}
</div>}
className={clsx(
'uppercase',
'select-none',
'[&>*:first-child]:py-1',
'[&>*:first-child]:font-medium',
'[&>*:first-child]:text-dim',
'[&>*:first-child]:text-xs',
'[&>*:first-child]:tracking-wider',
)}
>
{items.map(({
label,
explicitKey,
keywords,
accessory,
annotation,
annotationAria,
path,
action,
}) => {
const key = `${heading} ${explicitKey ?? label}`;
return <CommandKItem
key={key}
label={label}
value={key}
keywords={keywords}
onSelect={() => {
if (action) {
const result = action();
if (result instanceof Promise) {
setKeyWaiting(key);
setIsWaitingForAction(true);
result.then(shouldClose => {
shouldCloseAfterWaiting.current =
shouldClose === true;
setIsWaitingForAction(false);
});
} else {
if (!path) { setIsOpen?.(false); }
}
}
}
if (path) {
if (path !== pathname) {
setKeyWaiting(key);
shouldCloseAfterWaiting.current = true;
startTransition(() => {
router.push(path, { scroll: true });
});
} else {
setIsOpen?.(false);
if (path) {
if (path !== pathname) {
setKeyWaiting(key);
shouldCloseAfterWaiting.current = true;
startTransition(() => {
router.push(path, { scroll: true });
});
} else {
setIsOpen?.(false);
}
}
}
}}
accessory={accessory}
annotation={annotation}
annotationAria={annotationAria}
loading={key === keyWaiting}
disabled={isPending && key !== keyWaiting}
/>;
})}
</Command.Group>)}
}}
accessory={accessory}
annotation={annotation}
annotationAria={annotationAria}
loading={key === keyWaiting}
disabled={isPending && key !== keyWaiting}
/>;
})}
</Command.Group>)}
</div>
{footer && !queryLive &&
<div className={clsx(
'text-center text-base text-dim pt-2 sm:pt-3',
'pb-2.5',
)}>
{footer}
</div>}
</div>
{footer && !queryLive &&
<div className={clsx(
'text-center text-base text-dim pt-3 sm:pt-4',
'pb-5 md:pb-6',
)}>
{footer}
</div>}
</Command.List>
</Modal>
</Command.Dialog>