diff --git a/src/app/find/page.tsx b/src/app/find/page.tsx
new file mode 100644
index 0000000..53fa957
--- /dev/null
+++ b/src/app/find/page.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import { useSearchParams } from 'next/navigation';
+
+export default function Find(){
+ const searchParams = useSearchParams();
+ const query = searchParams.get('query');
+ return (
+
+ {query}
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/navigationBar/nav.tsx b/src/components/navigationBar/nav.tsx
index decbb87..c91d62a 100644
--- a/src/components/navigationBar/nav.tsx
+++ b/src/components/navigationBar/nav.tsx
@@ -8,6 +8,7 @@ import { cn } from "@/lib/utils";
import { Separator } from "@/components/ui/separator";
import { ThemeToggle } from "@/components/theme-toggle";
import { Button } from "@/components/ui/button";
+import { useRouter } from 'next/navigation';
import {
NavigationMenu,
NavigationMenuContent,
@@ -134,6 +135,7 @@ export function NavigationBar() {
const user = session?.user;
const [sessionLoaded, setSessionLoaded] = React.useState(false);
const [searchActive, setSearchActive] = React.useState(false);
+ const router = useRouter();
React.useEffect(() => {
if (!loading) {
@@ -141,6 +143,14 @@ export function NavigationBar() {
}
}, [loading]);
+ const handleKeyDown = (k: React.KeyboardEvent) => {
+ // check for "Enter"
+ if (k.key === 'Enter') {
+ const query = (k.target as HTMLInputElement).value.trim();
+ router.push(`/find?query=${encodeURIComponent(query)}`);
+ }
+ };
+
const businessComponents = [
{
title: "Businesses",
@@ -258,17 +268,12 @@ export function NavigationBar() {
{/* search bar's input */}
{
- // when open search bar and hit enter
- if(k.key == "Enter"){
- console.log((k.target as HTMLInputElement).value);
- }
- }}
+ onKeyDown={handleKeyDown}
/>