aura-omni-search 3.0.0 → 3.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +101 -0
- package/package.json +9 -7
package/README.md
CHANGED
|
@@ -67,6 +67,107 @@ Since we use standard Tailwind, you can customize the theme using CSS variables
|
|
|
67
67
|
|
|
68
68
|
---
|
|
69
69
|
|
|
70
|
+
## 💡 Example: React & Next.js
|
|
71
|
+
|
|
72
|
+
Here is a complete, copy-pasteable example of how to use this in a Next.js app with `lucide-react`.
|
|
73
|
+
|
|
74
|
+
### `components/CommandPalette.tsx`
|
|
75
|
+
|
|
76
|
+
```tsx
|
|
77
|
+
"use client";
|
|
78
|
+
|
|
79
|
+
import { useEffect, useState } from "react";
|
|
80
|
+
import { useRouter } from "next/navigation";
|
|
81
|
+
import { CreditCard, Home, Settings, User, LogOut } from "lucide-react";
|
|
82
|
+
|
|
83
|
+
// Import the component and types
|
|
84
|
+
import { Spotlight, SpotlightItem } from "aura-omni-search";
|
|
85
|
+
|
|
86
|
+
export function CommandPalette() {
|
|
87
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
88
|
+
const router = useRouter();
|
|
89
|
+
|
|
90
|
+
// 1. Define your items
|
|
91
|
+
const items: SpotlightItem[] = [
|
|
92
|
+
{
|
|
93
|
+
id: "home",
|
|
94
|
+
label: "Home",
|
|
95
|
+
description: "Go to dashboard",
|
|
96
|
+
icon: <Home size={20} />,
|
|
97
|
+
type: "page",
|
|
98
|
+
group: "Navigation",
|
|
99
|
+
route: "/dashboard",
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
id: "profile",
|
|
103
|
+
label: "Profile",
|
|
104
|
+
description: "Manage your account",
|
|
105
|
+
icon: <User size={20} />,
|
|
106
|
+
type: "page",
|
|
107
|
+
group: "Navigation",
|
|
108
|
+
route: "/profile",
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
id: "billing",
|
|
112
|
+
label: "Billing",
|
|
113
|
+
description: "View invoices and plans",
|
|
114
|
+
icon: <CreditCard size={20} />,
|
|
115
|
+
type: "page",
|
|
116
|
+
group: "Navigation",
|
|
117
|
+
route: "/billing",
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
id: "settings",
|
|
121
|
+
label: "Settings",
|
|
122
|
+
description: "App configuration",
|
|
123
|
+
icon: <Settings size={20} />,
|
|
124
|
+
type: "page",
|
|
125
|
+
group: "Navigation",
|
|
126
|
+
route: "/settings",
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
id: "logout",
|
|
130
|
+
label: "Log Out",
|
|
131
|
+
description: "Sign out of your account",
|
|
132
|
+
icon: <LogOut size={20} />,
|
|
133
|
+
type: "action",
|
|
134
|
+
group: "Actions",
|
|
135
|
+
action: () => {
|
|
136
|
+
console.log("Logging out...");
|
|
137
|
+
// perform logout logic
|
|
138
|
+
},
|
|
139
|
+
},
|
|
140
|
+
];
|
|
141
|
+
|
|
142
|
+
// 2. Handle Keyboard Shortcut (Cmd+K)
|
|
143
|
+
useEffect(() => {
|
|
144
|
+
const handleKeyDown = (e: KeyboardEvent) => {
|
|
145
|
+
if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
|
|
146
|
+
e.preventDefault();
|
|
147
|
+
setIsOpen((prev) => !prev);
|
|
148
|
+
}
|
|
149
|
+
};
|
|
150
|
+
window.addEventListener("keydown", handleKeyDown);
|
|
151
|
+
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
152
|
+
}, []);
|
|
153
|
+
|
|
154
|
+
// 3. Render
|
|
155
|
+
return (
|
|
156
|
+
<Spotlight
|
|
157
|
+
isOpen={isOpen}
|
|
158
|
+
onClose={() => setIsOpen(false)}
|
|
159
|
+
items={items}
|
|
160
|
+
onNavigate={(path) => router.push(path)} // Determine how to navigate
|
|
161
|
+
searchPlaceholder="Type a command or search..."
|
|
162
|
+
/>
|
|
163
|
+
);
|
|
164
|
+
}
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
Then simply drop `<CommandPalette />` into your root `layout.tsx` or `App.tsx`!
|
|
168
|
+
|
|
169
|
+
---
|
|
170
|
+
|
|
70
171
|
## 📄 License
|
|
71
172
|
|
|
72
173
|
MIT © Dhruv
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "aura-omni-search",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Universal Command Palette & Global Search for React",
|
|
6
6
|
"main": "./dist/index.umd.js",
|
|
@@ -34,16 +34,18 @@
|
|
|
34
34
|
"tailwind-merge": "^2.6.0"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
|
-
"@vitejs/plugin-react": "^5.1.2",
|
|
38
37
|
"@types/react": "^19.0.0",
|
|
39
38
|
"@types/react-dom": "^19.0.0",
|
|
39
|
+
"@types/react-router-dom": "^5.3.3",
|
|
40
|
+
"@vitejs/plugin-react": "^5.1.2",
|
|
41
|
+
"autoprefixer": "^10.4.0",
|
|
42
|
+
"postcss": "^8.4.0",
|
|
40
43
|
"react": "^19.2.3",
|
|
41
44
|
"react-dom": "^19.2.3",
|
|
42
|
-
"
|
|
43
|
-
"vite": "^7.3.1",
|
|
45
|
+
"react-router-dom": "^7.12.0",
|
|
44
46
|
"tailwindcss": "^3.4.0",
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
47
|
+
"tailwindcss-animate": "^1.0.7",
|
|
48
|
+
"typescript": "^5.0.0",
|
|
49
|
+
"vite": "^7.3.1"
|
|
48
50
|
}
|
|
49
51
|
}
|