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

Tighten Command-K content

Browse Source
This commit is contained in:
Sam Becker 2024-02-19 20:03:22 -06:00
parent 3992a426fb
commit 2cdbf43309
2 changed files with 100 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/CommandKClient.tsx
View File

@ -54,6 +54,20 @@ export default function CommandKClient({
}
}, [queryDebounced, onQueryChange]);
const sectionTheme: CommandKSection = {
heading: 'Theme',
items: [{
label: 'System',
action: () => setTheme('system'),
}, {
label: 'Light',
action: () => setTheme('light'),
}, {
label: 'Dark',
action: () => setTheme('dark'),
}],
};
return (
<Command.Dialog
open={open}
@ -66,64 +80,54 @@ export default function CommandKClient({
fast
>
<div className="space-y-3">
<div className="text-sm uppercase text-dim">
Search for photos, tags, cameras, and film
</div>
<div className="relative">
<Command.Input
onChangeCapture={(e) => setQuery(e.currentTarget.value)}
className="w-full !min-w-0"
className={clsx(
'w-full',
'placeholder:text-gray-400',
'placeholder:dark:text-gray-700',
)}
style={{ paddingRight: '2rem' }}
placeholder="Search photos, views, settings ..."
/>
{isLoading &&
<span className="absolute top-2.5 right-3">
<Spinner size={16} />
</span>}
</div>
<div
aria-hidden="true"
className={clsx(
'absolute bottom-4 inset-x-0 h-6 z-10 pointer-events-none',
'bg-gradient-to-t to-transparent',
'from-white dark:from-black',
)}
/>
<Command.List className="relative max-h-72 pb-4 overflow-y-scroll">
<Command.List className="relative max-h-72 overflow-y-scroll">
<Command.Empty>No results found.</Command.Empty>
{[{
heading: 'Theme',
items: [{
label: 'System',
action: () => setTheme('system'),
}, {
label: 'Light',
action: () => setTheme('light'),
}, {
label: 'Dark',
action: () => setTheme('dark'),
}],
} as CommandKSection]
.concat(sections)
{sections
.concat(sectionTheme)
.filter(({ items }) => items.length > 0)
.map(({ heading, items }) =>
<Command.Group
key={heading}
heading={heading}
className="select-none"
className={clsx(
'uppercase',
'select-none',
'[&>*:first-child]:py-1.5',
'[&>*:first-child]:font-medium',
'[&>*:first-child]:text-dim',
'[&>*:first-child]:text-xs',
'[&>*:first-child]:tracking-wider',
)}
>
{items.map(({ label, path, action }) =>
<Command.Item
key={`${heading}-${label}`}
className={clsx(
'p-1 rounded-md cursor-pointer',
'py-1 px-2 rounded-md cursor-pointer',
'data-[selected=true]:bg-gray-100',
'data-[selected=true]:dark:bg-gray-900/75',
'data-[active=true]:bg-green-400'
)}
onSelect={() => {
action?.();
setOpen(false);
if (path) {
setOpen(false);
router.push(path);
}
}}

96
src/site/CommandK.tsx
View File

@ -1,11 +1,20 @@
import CommandKClient from '@/components/CommandKClient';
import CommandKClient, { CommandKSection } from '@/components/CommandKClient';
import {
getUniqueCamerasCached,
getUniqueFilmSimulationsCached,
getUniqueTagsCached,
} from '@/photo/cache';
import { pathForCamera, pathForFilmSimulation, pathForTag } from './paths';
import {
PATH_ADMIN_CONFIGURATION,
PATH_ADMIN_PHOTOS,
PATH_ADMIN_TAGS,
PATH_ADMIN_UPLOADS,
pathForCamera,
pathForFilmSimulation,
pathForTag,
} from './paths';
import { formatCameraText } from '@/camera';
import { authCached } from '@/auth/cache';
export default async function CommandK() {
const [
@ -18,36 +27,63 @@ export default async function CommandK() {
getUniqueFilmSimulationsCached().catch(() => []),
]);
const session = await authCached().catch(() => null);
const showAdminPages = Boolean(session?.user?.email);
const SECTION_TAGS: CommandKSection = {
heading: 'Tags',
items: tags.map(({ tag }) => ({
label: tag,
path: pathForTag(tag),
})),
};
const SECTION_CAMERAS: CommandKSection = {
heading: 'Cameras',
items: cameras.map(({ camera }) => ({
label: formatCameraText(camera),
path: pathForCamera(camera),
})),
};
const SECTION_FILM: CommandKSection = {
heading: 'Film Simulations',
items: filmSimulations.map(({ simulation }) => ({
label: simulation,
path: pathForFilmSimulation(simulation),
})),
};
const SECTION_PAGES: CommandKSection = {
heading: 'Pages',
items: [{
label: 'Home',
path: '/',
}, {
label: 'Grid',
path:'/grid',
}].concat(showAdminPages ? [{
label: 'Admin » Photos',
path: PATH_ADMIN_PHOTOS,
}, {
label: 'Admin » Uploads',
path: PATH_ADMIN_UPLOADS,
}, {
label: 'Admin » Tags',
path: PATH_ADMIN_TAGS,
}, {
label: 'Admin » Config',
path: PATH_ADMIN_CONFIGURATION,
}] : []),
};
return <CommandKClient
sections={[
{
heading: 'Pages',
items: [{
label: 'Home',
path: '/',
}, {
label: 'Grid',
path:'/grid',
}],
}, {
heading: 'Tags',
items: tags.map(({ tag }) => ({
label: tag,
path: pathForTag(tag),
})),
}, {
heading: 'Cameras',
items: cameras.map(({ camera }) => ({
label: formatCameraText(camera),
path: pathForCamera(camera),
})),
}, {
heading: 'Film Simulations',
items: filmSimulations.map(({ simulation }) => ({
label: simulation,
path: pathForFilmSimulation(simulation),
})),
},
SECTION_TAGS,
SECTION_CAMERAS,
SECTION_FILM,
SECTION_PAGES,
]}
/>;
}