feat: command palette (#140)

* wip

* feat: new command palette

* chore: add universal search

* chore: cleanup

* feat: use title class for heading

* feat: add topic

* chore: advance search

web/components/custom/command-palette/command-items.tsx

@@ -0,0 +1,42 @@
+import { Command } from "cmdk"
+import { CommandSeparator, CommandShortcut } from "@/components/ui/command"
+import { LaIcon } from "../la-icon"
+import { CommandItemType, CommandAction } from "./command-data"
+
+export interface CommandItemProps extends Omit<CommandItemType, "action"> {
+	action: CommandAction
+	handleAction: (action: CommandAction, payload?: any) => void
+}
+
+export const CommandItem: React.FC<CommandItemProps> = ({ icon, label, action, payload, shortcut, handleAction }) => (
+	<Command.Item onSelect={() => handleAction(action, payload)}>
+		{icon && <LaIcon name={icon} />}
+		<span>{label}</span>
+		{shortcut && <CommandShortcut>{shortcut}</CommandShortcut>}
+	</Command.Item>
+)
+export interface CommandGroupProps {
+	heading?: string
+	items: CommandItemType[]
+	handleAction: (action: CommandAction, payload?: any) => void
+	isLastGroup: boolean
+}
+
+export const CommandGroup: React.FC<CommandGroupProps> = ({ heading, items, handleAction, isLastGroup }) => {
+	return (
+		<>
+			{heading ? (
+				<Command.Group heading={heading}>
+					{items.map((item, index) => (
+						<CommandItem key={`${heading}-${item.label}-${index}`} {...item} handleAction={handleAction} />
+					))}
+				</Command.Group>
+			) : (
+				items.map((item, index) => (
+					<CommandItem key={`item-${item.label}-${index}`} {...item} handleAction={handleAction} />
+				))
+			)}
+			{!isLastGroup && <CommandSeparator className="my-1.5" />}
+		</>
+	)
+}