97 lines
2.6 KiB
JavaScript
97 lines
2.6 KiB
JavaScript
'use client'
|
||
|
||
import { useEffect, useState } from 'react'
|
||
|
||
import { sorts } from 'utils'
|
||
|
||
import { Icons, Modal } from 'components'
|
||
|
||
import { useUrlQuery, useDisclosure } from '@/hooks'
|
||
|
||
const Sort = ({ handleChangeRoute }) => {
|
||
//? Assets
|
||
const [isSort, sortHandlers] = useDisclosure()
|
||
const query = useUrlQuery()
|
||
|
||
//? State
|
||
const [sort, setSort] = useState(sorts[0])
|
||
|
||
//? Handlers
|
||
const handleSortChange = item => {
|
||
setSort(sorts[item.value - 1])
|
||
handleChangeRoute({ sort: item.value })
|
||
sortHandlers.close()
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (query.sort) {
|
||
setSort(sorts[+query.sort - 1])
|
||
} else {
|
||
setSort(sorts[0])
|
||
}
|
||
}, [query])
|
||
|
||
useEffect(() => {
|
||
setSort(sorts[0])
|
||
}, [query.category])
|
||
|
||
//? Render(s)
|
||
return (
|
||
<>
|
||
<div className="xl:hidden">
|
||
<button type="button" className="flex items-center gap-x-1" onClick={sortHandlers.open}>
|
||
<Icons.Sort className="w-6 h-6 icon" />
|
||
<span>{sort?.name}</span>
|
||
</button>
|
||
|
||
<Modal isShow={isSort} onClose={sortHandlers.close} effect="bottom-to-top">
|
||
<Modal.Content
|
||
onClose={sortHandlers.close}
|
||
className="flex flex-col h-full px-5 py-3 bg-white md:rounded-lg gap-y-5 "
|
||
>
|
||
<Modal.Header onClose={sortHandlers.close}>排序</Modal.Header>
|
||
<Modal.Body>
|
||
<div className="divide-y">
|
||
{sorts.map((item, i) => (
|
||
<div key={i} className="flex items-center">
|
||
<button
|
||
className="block w-full py-3 text-left text-gray-700"
|
||
type="button"
|
||
name="sort"
|
||
onClick={() => handleSortChange(item)}
|
||
>
|
||
{item.name}
|
||
</button>
|
||
{sort?.value === item.value && <Icons.Check className="icon" />}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</Modal.Body>
|
||
</Modal.Content>
|
||
</Modal>
|
||
</div>
|
||
<div className="hidden xl:flex xl:gap-x-4 xl:items-center ">
|
||
<div className="flex items-center gap-x-1">
|
||
<Icons.Sort className="icon " />
|
||
<span>排序：</span>
|
||
</div>
|
||
{sorts.map((item, i) => (
|
||
<button
|
||
key={i}
|
||
className={`py-0.5 text-sm ${
|
||
sort?.value === item.value ? 'text-red-500' : 'text-gray-600'
|
||
}`}
|
||
type="button"
|
||
name="sort"
|
||
onClick={() => handleSortChange(item)}
|
||
>
|
||
{item.name}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default Sort
|