Skip to content

ProductListSort

Component for sorting product lists

Code

"use client"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../Select/index"

const sortTypes = ["popular", "lowPrice", "highPrice"]
const Content = () => {
	return (
		<SelectContent className="py-1 flex w-auto flex-col items-start" role="none">
			{sortTypes.map((type) => {
				return <SelectItem value={type}>{type}</SelectItem>
			})}
		</SelectContent>
	)
}

const ProductListSort = () => {
	return (
		<Select>
			<SelectTrigger className="ml-auto w-[110px]">
				<SelectValue placeholder="Select" />
			</SelectTrigger>
			<Content />
		</Select>
	)
}

export default ProductListSort