crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 20:26:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added selected state to sort options

Browse Source
This commit is contained in:
Luis Alvarez
2020-10-14 13:50:56 -05:00
parent 8905089fd7
commit df24786d18
2 changed files with 31 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
pages/search.tsx
View File

@@ -23,6 +23,13 @@ export async function getStaticProps({ preview }: GetStaticPropsContext) {
}
}
const SORT = Object.entries({
'latest-desc': 'Latest arrivals',
'trending-desc': 'Trending',
'price-asc': 'Price: Low to high',
'price-desc': 'Price: High to low',
})
export default function Search({
categories,
brands,
@@ -127,56 +134,27 @@ export default function Search({
<div className="col-span-2">
<ul>
<li className="py-1 text-primary font-bold tracking-wide">Sort</li>
<li className="py-1 text-default">
<Link
href={{
pathname,
query: filterQuery({ q }),
}}
>
<li
className={cn('py-1 text-default', {
underline: !sort,
})}
>
<Link href={{ pathname, query: filterQuery({ q }) }}>
<a>Relevance</a>
</Link>
</li>
<li className="py-1 text-default">
<Link
href={{
pathname,
query: filterQuery({ q, sort: 'latest-desc' }),
}}
{SORT.map(([key, text]) => (
<li
key={key}
className={cn('py-1 text-default', {
underline: sort === key,
})}
>
<a>Latest arrivals</a>
</Link>
</li>
<li className="py-1 text-default">
<Link
href={{
pathname,
query: filterQuery({ q, sort: 'trending-desc' }),
}}
>
<a>Trending</a>
</Link>
</li>
<li className="py-1 text-default">
<Link
href={{
pathname,
query: filterQuery({ q, sort: 'price-asc' }),
}}
>
<a>Price: Low to high</a>
</Link>
</li>
<li className="py-1 text-default">
<Link
href={{
pathname,
query: filterQuery({ q, sort: 'price-desc' }),
}}
>
<a>Price: High to low</a>
</Link>
</li>
<Link href={{ pathname, query: filterQuery({ q, sort: key }) }}>
<a>{text}</a>
</Link>
</li>
))}
</ul>
</div>
</div>