Product List 22 block design & features
A slim toolbar shows the product count on the left and a Filter button with a Sort by control on the right. Below is a four column grid of rounded square photos with the category, the product name and the price underneath, built with shadcn/ui Sheet, Accordion, Slider and Pagination.
Filter opens a sheet from the right with removable chips for active filters, collapsible sections for availability, a price range slider with inputs, sizes and category, plus Apply and Clear All buttons at the bottom. The Filter button shows a count of applied filters. Hovering a card fades to a second photo and slides up an Add to Cart button. Numbered pagination sits under the grid.
On desktop the sort control is a select. On smaller screens it opens its own bottom sheet of sort options and the grid drops to three, then two columns, and on phones a Quick View button sits under each card. Filters, sort options and products come from a data constant at the top of the file.