cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Removing heavy comp from the client

Browse Source
This commit is contained in:
Belen Curcio
2020-11-06 11:43:11 -03:00
parent c419c3f361
commit b9cbf4f97f
3 changed files with 76 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/common/Navbar/Navbar.tsx
View File

@@ -42,7 +42,7 @@ const Navbar: FC<Props> = ({ className }) => {
</div>
<div className="flex pb-4 lg:px-6 lg:hidden">
<Searchbar />
<Searchbar id="mobileSearch" />
</div>
</div>
)

83
components/common/Searchbar/Searchbar.tsx
View File

@@ -1,4 +1,4 @@
import { FC, useEffect } from 'react'
import { FC, useEffect, useMemo } from 'react'
import cn from 'classnames'
import s from './Searchbar.module.css'
import { useRouter } from 'next/router'
@@ -15,48 +15,51 @@ const Searchbar: FC<Props> = ({ className, id = 'search' }) => {
router.prefetch('/search')
}, [])
return (
<div
className={cn(
'relative text-sm bg-accents-1 text-base w-full transition-colors duration-150',
className
)}
>
<label className="hidden" htmlFor={id}>
Search
</label>
<input
id={id}
className={s.input}
placeholder="Search for products..."
defaultValue={router.query.q}
onKeyUp={(e) => {
e.preventDefault()
return useMemo(
() => (
<div
className={cn(
'relative text-sm bg-accents-1 text-base w-full transition-colors duration-150',
className
)}
>
<label className="hidden" htmlFor={id}>
Search
</label>
<input
id={id}
className={s.input}
placeholder="Search for products..."
defaultValue={router.query.q}
onKeyUp={(e) => {
e.preventDefault()
if (e.key === 'Enter') {
const q = e.currentTarget.value
if (e.key === 'Enter') {
const q = e.currentTarget.value
router.push(
{
pathname: `/search`,
query: q ? { q } : {},
},
undefined,
{ shallow: true }
)
}
}}
/>
<div className={s.iconContainer}>
<svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
/>
</svg>
router.push(
{
pathname: `/search`,
query: q ? { q } : {},
},
undefined,
{ shallow: true }
)
}
}}
/>
<div className={s.iconContainer}>
<svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
/>
</svg>
</div>
</div>
</div>
),
[]
)
}