feat: navigation for command palette (#150)

* feat: add dotenv to dev dep

* chore: jest use env

* feat

* feat: command palette navigation
This commit is contained in:
Aslam
2024-09-08 05:43:44 +07:00
committed by GitHub
parent a87c27d91f
commit f005101d91
8 changed files with 185 additions and 13 deletions

View File

@@ -1,12 +1,14 @@
import { icons } from "lucide-react"
import { useCommandActions } from "./hooks/use-command-actions"
import { LaAccount } from "@/lib/schema"
import { HTMLLikeElement } from "@/lib/utils"
export type CommandAction = string | (() => void)
export type CommandItemType = {
icon?: keyof typeof icons
label: string
value: string
label: HTMLLikeElement | string
action: CommandAction
payload?: any
shortcut?: string
@@ -25,9 +27,16 @@ export const createCommandGroups = (
{
heading: "General",
items: [
{ icon: "SunMoon", label: "Change Theme...", action: "CHANGE_PAGE", payload: "changeTheme" },
{
icon: "SunMoon",
value: "Change Theme...",
label: "Change Theme...",
action: "CHANGE_PAGE",
payload: "changeTheme"
},
{
icon: "Copy",
value: "Copy Current URL",
label: "Copy Current URL",
action: actions.copyCurrentURL
}
@@ -36,20 +45,88 @@ export const createCommandGroups = (
{
heading: "Personal Links",
items: [
{ icon: "TextSearch", label: "Search Links...", action: "CHANGE_PAGE", payload: "searchLinks" },
{ icon: "Plus", label: "Create New Link...", action: () => actions.navigateTo("/") }
{
icon: "TextSearch",
value: "Search Links...",
label: "Search Links...",
action: "CHANGE_PAGE",
payload: "searchLinks"
},
{
icon: "Plus",
value: "Create New Link...",
label: "Create New Link...",
action: () => actions.navigateTo("/")
}
]
},
{
heading: "Personal Pages",
items: [
{ icon: "FileSearch", label: "Search Pages...", action: "CHANGE_PAGE", payload: "searchPages" },
{
icon: "FileSearch",
value: "Search Pages...",
label: "Search Pages...",
action: "CHANGE_PAGE",
payload: "searchPages"
},
{
icon: "Plus",
value: "Create New Page...",
label: "Create New Page...",
action: () => actions.createNewPage(me)
}
]
},
{
heading: "Navigation",
items: [
{
icon: "ArrowRight",
value: "Go to Links",
label: {
tag: "span",
children: ["Go to ", { tag: "span", attributes: { className: "font-semibold" }, children: ["links"] }]
},
action: () => actions.navigateTo("/links")
},
{
icon: "ArrowRight",
value: "Go to Pages",
label: {
tag: "span",
children: ["Go to ", { tag: "span", attributes: { className: "font-semibold" }, children: ["pages"] }]
},
action: () => actions.navigateTo("/pages")
},
{
icon: "ArrowRight",
value: "Go to Search",
label: {
tag: "span",
children: ["Go to ", { tag: "span", attributes: { className: "font-semibold" }, children: ["search"] }]
},
action: () => actions.navigateTo("/search")
},
{
icon: "ArrowRight",
value: "Go to Profile",
label: {
tag: "span",
children: ["Go to ", { tag: "span", attributes: { className: "font-semibold" }, children: ["profile"] }]
},
action: () => actions.navigateTo("/profile")
},
{
icon: "ArrowRight",
value: "Go to Settings",
label: {
tag: "span",
children: ["Go to ", { tag: "span", attributes: { className: "font-semibold" }, children: ["settings"] }]
},
action: () => actions.navigateTo("/settings")
}
]
}
],
searchLinks: [],
@@ -58,9 +135,24 @@ export const createCommandGroups = (
changeTheme: [
{
items: [
{ icon: "Moon", label: "Change Theme to Dark", action: () => actions.changeTheme("dark") },
{ icon: "Sun", label: "Change Theme to Light", action: () => actions.changeTheme("light") },
{ icon: "Monitor", label: "Change Theme to System", action: () => actions.changeTheme("system") }
{
icon: "Moon",
value: "Change Theme to Dark",
label: "Change Theme to Dark",
action: () => actions.changeTheme("dark")
},
{
icon: "Sun",
value: "Change Theme to Light",
label: "Change Theme to Light",
action: () => actions.changeTheme("light")
},
{
icon: "Monitor",
value: "changeThemeToSystem",
label: "Change Theme to System",
action: () => actions.changeTheme("system")
}
]
}
]