crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-06-19 05:31:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: ensure search layout dont break on mobile

Browse Source
This commit is contained in:
georgekaran 2020-11-03 15:00:31 -03:00
parent 9ea6da6d55
commit 06902acc47
1 changed files with 53 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
pages/search.tsx
View File

@ -39,6 +39,41 @@ const SORT = Object.entries({
'price-desc': 'Price: High to low', 'price-desc': 'Price: High to low',
}) })
type SortItemsProps = {
q: string | string[] | undefined
sort: string | string[] | undefined
pathname: string
}
const SortItems = ({ pathname, sort, q }:SortItemsProps) => {
return (
<>
<li className="py-1 text-sm sm:text-base font-bold tracking-wide">Sort</li>
<li
className={cn('py-1 text-accents-8 text-sm sm:text-base', {
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 text-sm sm:text-base', {
underline: sort === key,
})}
>
<Link href={{ pathname, query: filterQuery({ q, sort: key }) }}>
<a>{text}</a>
</Link>
</li>
))}
</>
)
}
export default function Search({ export default function Search({
categories, categories,
brands, brands,
@ -69,9 +104,16 @@ export default function Search({
return ( return (
<Container> <Container>
<div className="grid grid-cols-12 gap-4 mt-3 mb-20"> <div className="grid grid-cols-12 gap-4 mt-3 mb-20">
<div className="col-span-2"> <div className="col-span-4 sm:col-span-2">
<ul className="block sm:hidden mb-10">
<SortItems
pathname={pathname}
q={q}
sort={sort}
/>
</ul>
<ul className="mb-10"> <ul className="mb-10">
<li className="py-1 text-base font-bold tracking-wide"> <li className="py-1 text-sm sm: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>
</Link> </Link>
@ -79,7 +121,7 @@ export default function Search({
{categories.map((cat) => ( {categories.map((cat) => (
<li <li
key={cat.path} key={cat.path}
className={cn('py-1 text-accents-8', { className={cn('py-1 text-accents-8 text-sm sm:text-base', {
underline: activeCategory?.entityId === cat.entityId, underline: activeCategory?.entityId === cat.entityId,
})} })}
> >
@ -95,7 +137,7 @@ export default function Search({
))} ))}
</ul> </ul>
<ul> <ul>
<li className="py-1 text-base font-bold tracking-wide"> <li className="py-1 text-sm sm:text-base font-bold tracking-wide">
<Link href={{ pathname: getDesignerPath('', category), query }}> <Link href={{ pathname: getDesignerPath('', category), query }}>
<a>All Designers</a> <a>All Designers</a>
</Link> </Link>
@ -103,7 +145,7 @@ export default function Search({
{brands.flatMap(({ node }) => ( {brands.flatMap(({ node }) => (
<li <li
key={node.path} key={node.path}
className={cn('py-1 text-accents-8', { className={cn('py-1 text-accents-8 text-sm sm:text-base', {
underline: activeBrand?.entityId === node.entityId, underline: activeBrand?.entityId === node.entityId,
})} })}
> >
@ -190,30 +232,13 @@ export default function Search({
</Grid> </Grid>
)} )}
</div> </div>
<div className="col-span-2"> <div className="hidden sm:block col-span-2">
<ul> <ul>
<li className="py-1 text-base font-bold tracking-wide">Sort</li> <SortItems
<li pathname={pathname}
className={cn('py-1 text-accents-8', { q={q}
underline: !sort, sort={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> </ul>
</div> </div>
</div> </div>