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: 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',
})
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({
categories,
brands,
@ -69,9 +104,16 @@ export default function Search({
return (
<Container>
<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">
<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 }}>
<a>All Categories</a>
</Link>
@ -79,7 +121,7 @@ export default function Search({
{categories.map((cat) => (
<li
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,
})}
>
@ -95,7 +137,7 @@ export default function Search({
))}
</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 }}>
<a>All Designers</a>
</Link>
@ -103,7 +145,7 @@ export default function Search({
{brands.flatMap(({ node }) => (
<li
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,
})}
>
@ -190,30 +232,13 @@ export default function Search({
</Grid>
)}
</div>
<div className="col-span-2">
<div className="hidden sm:block col-span-2">
<ul>
<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>
))}
<SortItems
pathname={pathname}
q={q}
sort={sort}
/>
</ul>
</div>
</div>