Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | 1x 1x 1x 1x 1x 1x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 17x 1x 1x | "use client";
import React, { useState } from "react";
import { Icon } from "@/components/ui/icons";
import { Button } from "@/components/ui";
const SizeDropdown = () => {
const [toggleDropdown, setToggleDropdown] = useState(true);
return (
<div className="bg-white shadow-1 rounded-lg">
<div
onClick={() => setToggleDropdown(!toggleDropdown)}
className={`cursor-pointer flex items-center justify-between py-3 pl-6 pr-5.5 ${
toggleDropdown && "shadow-filter"
}`}
>
<p className="text-dark">Size</p>
<Button
onClick={() => setToggleDropdown(!toggleDropdown)}
aria-label="Toggle size filter options"
aria-expanded={toggleDropdown}
variant="ghost"
size="sm"
className={`text-dark ease-out duration-200 ${
toggleDropdown && "rotate-180"
}`}
>
<Icon name="chevron-down" className="fill-current" size={24} />
</Button>
</div>
{/* // <!-- dropdown menu --> */}
<div
className={`flex-wrap gap-2.5 p-6 ${
toggleDropdown ? "flex" : "hidden"
}`}
>
<label
htmlFor="sizeM"
className="cursor-pointer select-none flex items-center rounded-md bg-blue text-white hover:bg-blue hover:text-white"
>
<div className="relative">
<input type="radio" name="size" id="sizeM" className="sr-only" />
<div className="text-custom-sm py-[5px] px-3.5 rounded-[5px]">
M
</div>
</div>
</label>
<label
htmlFor="sizeL"
className="cursor-pointer select-none flex items-center rounded-md hover:bg-blue hover:text-white"
>
<div className="relative">
<input type="radio" name="size" id="sizeL" className="sr-only" />
<div className="text-custom-sm py-[5px] px-3.5 rounded-[5px]">
L
</div>
</div>
</label>
<label
htmlFor="sizeXL"
className="cursor-pointer select-none flex items-center rounded-md hover:bg-blue hover:text-white"
>
<div className="relative">
<input type="radio" name="size" id="sizeXL" className="sr-only" />
<div className="text-custom-sm py-[5px] px-3.5 rounded-[5px]">
XL
</div>
</div>
</label>
<label
htmlFor="sizeXXL"
className="cursor-pointer select-none flex items-center rounded-md hover:bg-blue hover:text-white"
>
<div className="relative">
<input type="radio" name="size" id="sizeXXL" className="sr-only" />
<div className="text-custom-sm py-[5px] px-3.5 rounded-[5px]">
XXL
</div>
</div>
</label>
</div>
</div>
);
};
export default SizeDropdown;
|