forked from crowetic/commerce
Compare commits
4 Commits
main
...
form-with-
Author | SHA1 | Date | |
---|---|---|---|
|
f29a16de5c | ||
|
6bfd0b1bd9 | ||
|
6e85b80158 | ||
|
8c5f8d8d2a |
8
app/search/children-wrapper.tsx
Normal file
8
app/search/children-wrapper.tsx
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
'use client';
|
||||||
|
import { useSearchParams } from 'next/navigation';
|
||||||
|
import { Fragment } from 'react';
|
||||||
|
|
||||||
|
export default function ChildrenWrapper({ children }: { children: React.ReactNode }) {
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
return <Fragment key={searchParams.get('q')}>{children}</Fragment>;
|
||||||
|
}
|
@ -2,6 +2,7 @@ import Footer from 'components/layout/footer';
|
|||||||
import Collections from 'components/layout/search/collections';
|
import Collections from 'components/layout/search/collections';
|
||||||
import FilterList from 'components/layout/search/filter';
|
import FilterList from 'components/layout/search/filter';
|
||||||
import { sorting } from 'lib/constants';
|
import { sorting } from 'lib/constants';
|
||||||
|
import ChildrenWrapper from './children-wrapper';
|
||||||
|
|
||||||
export default function SearchLayout({ children }: { children: React.ReactNode }) {
|
export default function SearchLayout({ children }: { children: React.ReactNode }) {
|
||||||
return (
|
return (
|
||||||
@ -10,7 +11,9 @@ export default function SearchLayout({ children }: { children: React.ReactNode }
|
|||||||
<div className="order-first w-full flex-none md:max-w-[125px]">
|
<div className="order-first w-full flex-none md:max-w-[125px]">
|
||||||
<Collections />
|
<Collections />
|
||||||
</div>
|
</div>
|
||||||
<div className="order-last min-h-screen w-full md:order-none">{children}</div>
|
<div className="order-last min-h-screen w-full md:order-none">
|
||||||
|
<ChildrenWrapper>{children}</ChildrenWrapper>
|
||||||
|
</div>
|
||||||
<div className="order-none flex-none md:order-last md:w-[125px]">
|
<div className="order-none flex-none md:order-last md:w-[125px]">
|
||||||
<FilterList list={sorting} title="Sort by" />
|
<FilterList list={sorting} title="Sort by" />
|
||||||
</div>
|
</div>
|
||||||
|
@ -37,7 +37,7 @@ export async function Navbar() {
|
|||||||
<li key={item.title}>
|
<li key={item.title}>
|
||||||
<Link
|
<Link
|
||||||
href={item.path}
|
href={item.path}
|
||||||
prefetch={true}
|
prefetch={item.path === '/search' ? undefined : true}
|
||||||
className="text-neutral-500 underline-offset-4 hover:text-black hover:underline dark:text-neutral-400 dark:hover:text-neutral-300"
|
className="text-neutral-500 underline-offset-4 hover:text-black hover:underline dark:text-neutral-400 dark:hover:text-neutral-300"
|
||||||
>
|
>
|
||||||
{item.title}
|
{item.title}
|
||||||
|
@ -1,35 +1,18 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
|
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
|
||||||
import { createUrl } from 'lib/utils';
|
import Form from 'next/form';
|
||||||
import { useRouter, useSearchParams } from 'next/navigation';
|
import { useSearchParams } from 'next/navigation';
|
||||||
|
|
||||||
export default function Search() {
|
export default function Search() {
|
||||||
const router = useRouter();
|
|
||||||
const searchParams = useSearchParams();
|
const searchParams = useSearchParams();
|
||||||
|
|
||||||
function onSubmit(e: React.FormEvent<HTMLFormElement>) {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
const val = e.target as HTMLFormElement;
|
|
||||||
const search = val.search as HTMLInputElement;
|
|
||||||
const newParams = new URLSearchParams(searchParams.toString());
|
|
||||||
|
|
||||||
if (search.value) {
|
|
||||||
newParams.set('q', search.value);
|
|
||||||
} else {
|
|
||||||
newParams.delete('q');
|
|
||||||
}
|
|
||||||
|
|
||||||
router.push(createUrl('/search', newParams));
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form onSubmit={onSubmit} className="w-max-[550px] relative w-full lg:w-80 xl:w-full">
|
<Form action="/search" className="w-max-[550px] relative w-full lg:w-80 xl:w-full">
|
||||||
<input
|
<input
|
||||||
key={searchParams?.get('q')}
|
key={searchParams?.get('q')}
|
||||||
type="text"
|
type="text"
|
||||||
name="search"
|
name="q"
|
||||||
placeholder="Search for products..."
|
placeholder="Search for products..."
|
||||||
autoComplete="off"
|
autoComplete="off"
|
||||||
defaultValue={searchParams?.get('q') || ''}
|
defaultValue={searchParams?.get('q') || ''}
|
||||||
@ -38,7 +21,7 @@ export default function Search() {
|
|||||||
<div className="absolute right-0 top-0 mr-3 flex h-full items-center">
|
<div className="absolute right-0 top-0 mr-3 flex h-full items-center">
|
||||||
<MagnifyingGlassIcon className="h-4" />
|
<MagnifyingGlassIcon className="h-4" />
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</Form>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -17,9 +17,9 @@
|
|||||||
"@heroicons/react": "^2.1.5",
|
"@heroicons/react": "^2.1.5",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"geist": "^1.3.1",
|
"geist": "^1.3.1",
|
||||||
"next": "14.2.5",
|
"next": "https://vercel-packages.vercel.app/next/prs/68340/next",
|
||||||
"react": "18.3.1",
|
"react": "19.0.0-rc-3208e73e-20240730",
|
||||||
"react-dom": "18.3.1",
|
"react-dom": "19.0.0-rc-3208e73e-20240730",
|
||||||
"sonner": "^1.5.0"
|
"sonner": "^1.5.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
1604
pnpm-lock.yaml
generated
1604
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user