37 lines
2.2 KiB
JavaScript
Executable File
37 lines
2.2 KiB
JavaScript
Executable File
import { useState } from 'react';
|
|
|
|
export default function SortButton({ setSort }){
|
|
let [open, setOpen] = useState(false);
|
|
|
|
function toggleOpen(){
|
|
if(!open){
|
|
document.getElementById('sort_dropdown').classList.remove('scale-0');
|
|
document.getElementById('sort_dropdown').classList.add('scale-100');
|
|
document.getElementById('sort_dropdown').classList.remove('opacity-0');
|
|
document.getElementById('sort_dropdown').classList.add('opacity-100');
|
|
setOpen(true);
|
|
}
|
|
else {
|
|
document.getElementById('sort_dropdown').classList.remove('scale-100');
|
|
document.getElementById('sort_dropdown').classList.add('scale-0');
|
|
document.getElementById('sort_dropdown').classList.remove('opacity-100');
|
|
document.getElementById('sort_dropdown').classList.add('opacity-0');
|
|
setOpen(false);
|
|
}
|
|
}
|
|
return (
|
|
<div className="relative">
|
|
<button id="sort_button" onClick={ toggleOpen } className="transition duration-300 ease-in-out flex w-fit px-2 py-1 pb-0.5 text-sm text-white bg-gradient-to-tr from-rose-900 to-orange-700 rounded-lg">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-4 h-4">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25" />
|
|
</svg>
|
|
<span className="pr-1 text-sm">مرتب سازی</span>
|
|
</button>
|
|
<div id="sort_dropdown" onClick={e => toggleOpen()} className="mt-1 flex flex-col text-sm items-center absolute bg-white border w-full rounded-xl origin-top scale-0 opacity-0 duration-600 transition ease-in-out translate">
|
|
<button onClick={ e => setSort('default') } className="border-b py-1 pt-2 border-gray-300 w-full">پیشفرض </button>
|
|
<button onClick={ e => setSort('price') } className="border-b py-1 pt-2 border-gray-300 w-full">قیمت </button>
|
|
<button onClick={ e => setSort('popularity') } className="py-2 w-full">محبوبیت </button>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |