crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-06-18 13:11:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix responsiviness on search page

Browse Source
This commit is contained in:
Matheus Kuster 2020-11-06 11:51:01 -03:00
parent b6160b44ab
commit 29c3fc7803
1 changed files with 149 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
pages/search.tsx
View File

@ -1,3 +1,4 @@
import {useState} from 'react'
import cn from 'classnames' import cn from 'classnames'
import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next' import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
import Link from 'next/link' import Link from 'next/link'
@ -43,6 +44,8 @@ export default function Search({
categories, categories,
brands, brands,
}: InferGetStaticPropsType<typeof getStaticProps>) { }: InferGetStaticPropsType<typeof getStaticProps>) {
const [showMobileMenu, setShowMobileMenu] = useState<boolean>(false)
const router = useRouter() const router = useRouter()
const { asPath } = router const { asPath } = router
const { q, sort } = router.query const { q, sort } = router.query
@ -66,11 +69,35 @@ export default function Search({
sort: typeof sort === 'string' ? sort : '', sort: typeof sort === 'string' ? sort : '',
}) })
return ( const Sort = () => (
<Container> <ul>
<div className="grid grid-cols-12 gap-4 mt-3 mb-20"> <li className="py-1 text-base font-bold tracking-wide">Sort</li>
<div className="col-span-2"> <li
<ul className="mb-10"> className={cn('py-1 text-accents-8', {
underline: !sort,
})}
>
<Link href={{ pathname, query: filterQuery({ q }) }}>
<a>Relevance</a>
</Link>
</li>
{SORT.map(([key, text]) => (
<li
key={key}
className={cn('py-1 text-accents-8', {
underline: sort === key,
})}
>
<Link href={{ pathname, query: filterQuery({ q, sort: key }) }}>
<a>{text}</a>
</Link>
</li>
))}
</ul>
)
const Categories = () => (
<ul className="mb-6 md:mb-10">
<li className="py-1 text-base font-bold tracking-wide"> <li className="py-1 text-base font-bold tracking-wide">
<Link href={{ pathname: getCategoryPath('', brand), query }}> <Link href={{ pathname: getCategoryPath('', brand), query }}>
<a>All Categories</a> <a>All Categories</a>
@ -94,6 +121,9 @@ export default function Search({
</li> </li>
))} ))}
</ul> </ul>
)
const Designers = () => (
<ul> <ul>
<li className="py-1 text-base font-bold tracking-wide"> <li className="py-1 text-base font-bold tracking-wide">
<Link href={{ pathname: getDesignerPath('', category), query }}> <Link href={{ pathname: getDesignerPath('', category), query }}>
@ -118,10 +148,19 @@ export default function Search({
</li> </li>
))} ))}
</ul> </ul>
)
return (
<Container>
<div className="grid grid-cols-12 gap-4 mt-3 mb-20">
<div className="col-span-2 hidden md:block">
<Categories />
<Designers />
</div> </div>
<div className="col-span-8"> <div className="col-span-12 md:col-span-8">
{(q || activeCategory || activeBrand) && ( {(q || activeCategory || activeBrand) && (
<div className="mb-12 transition ease-in duration-75"> <div className="mb-6 transition ease-in duration-75">
<div className="flex justify-between">
{data ? ( {data ? (
<> <>
<span <span
@ -156,12 +195,30 @@ export default function Search({
</span> </span>
</> </>
) : q ? ( ) : q ? (
<> <div>
Searching for: "<strong>{q}</strong>" Searching for: "<strong>{q}</strong>"
</> </div>
) : ( ) : (
<>Searching...</> <>Searching...</>
)} )}
<button
className="md:invisible text-accents-8 outline-none"
onClick={() => setShowMobileMenu(prev => !prev)}
>
Filter & Sort
</button>
</div>
{showMobileMenu && (
<div className="flex justify-between mt-4 md:hidden">
<div className="flex flex-col">
<Categories />
<Designers />
</div>
<Sort />
</div>
)}
</div> </div>
)} )}
@ -190,31 +247,8 @@ export default function Search({
</Grid> </Grid>
)} )}
</div> </div>
<div className="col-span-2"> <div className="col-span-2 hidden md:block">
<ul> <Sort />
<li className="py-1 text-base font-bold tracking-wide">Sort</li>
<li
className={cn('py-1 text-accents-8', {
underline: !sort,
})}
>
<Link href={{ pathname, query: filterQuery({ q }) }}>
<a>Relevance</a>
</Link>
</li>
{SORT.map(([key, text]) => (
<li
key={key}
className={cn('py-1 text-accents-8', {
underline: sort === key,
})}
>
<Link href={{ pathname, query: filterQuery({ q, sort: key }) }}>
<a>{text}</a>
</Link>
</li>
))}
</ul>
</div> </div>
</div> </div>
</Container> </Container>