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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 54x 54x 54x 54x 54x 54x 54x 54x 54x 54x 54x 54x 54x 54x 54x 54x 54x 54x 54x 54x 54x 54x 54x 54x 54x 54x 54x 54x 54x 54x 54x 54x 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 48x 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";
type Gender = {
name: string;
products: number;
};
const GenderItem = ({ category }: { category: Gender }) => {
const [selected, setSelected] = useState(false);
return (
<Button
variant="ghost"
size="sm"
className={`${
selected && "text-blue"
} group justify-between w-full`}
onClick={() => setSelected(!selected)}
>
<div className="flex items-center gap-2">
<div
className={`cursor-pointer flex items-center justify-center rounded w-4 h-4 border ${
selected ? "border-blue bg-blue" : "bg-white border-gray-3"
}`}
>
<Icon name="check" className={selected ? "block text-white" : "hidden"} size={10} />
</div>
<span>{category.name}</span>
</div>
<span
className={`${
selected ? "text-white bg-blue" : "bg-gray-2"
} inline-flex rounded-[30px] text-custom-xs px-2 ease-out duration-200 group-hover:text-white group-hover:bg-blue`}
>
{category.products}
</span>
</Button>
);
};
const GenderDropdown = ({ genders }: { genders: Gender[] }) => {
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">Gender</p>
<Button
onClick={() => setToggleDropdown(!toggleDropdown)}
aria-label="Toggle gender filter options"
aria-expanded={toggleDropdown}
variant="ghost"
size="sm"
className="text-dark"
>
<Icon name="chevron-down" className="fill-current" size={24} rotate={toggleDropdown ? 180 : 0} />
</Button>
</div>
{/* <!-- dropdown menu --> */}
<div
className={`flex-col gap-3 py-6 pl-6 pr-5.5 ${
toggleDropdown ? "flex" : "hidden"
}`}
>
{genders.map((gender, key) => (
<GenderItem key={key} category={gender} />
))}
</div>
</div>
);
};
export default GenderDropdown;
|