| 1 | import type { BanFilter } from "@/types/filters"; |
| 2 | import clsx from "clsx"; |
| 3 | |
| 4 | interface BanStatusButtonsProps { |
| 5 | banFilter: BanFilter; |
| 6 | onBanFilterChange: (value: BanFilter) => void; |
| 7 | className?: string; |
| 8 | } |
| 9 | |
| 10 | export const BanStatusButtons = ({ |
| 11 | banFilter, |
| 12 | onBanFilterChange, |
| 13 | className, |
| 14 | }: BanStatusButtonsProps) => ( |
| 15 | <div |
| 16 | className={clsx( |
| 17 | "flex rounded-lg overflow-hidden border border-foreground/20", |
| 18 | className |
| 19 | )} |
| 20 | > |
| 21 | <button |
| 22 | onClick={() => onBanFilterChange("all")} |
| 23 | className={`cursor-pointer px-4 h-10 text-sm font-medium transition-colors ${ |
| 24 | banFilter === "all" |
| 25 | ? "bg-primary text-primary-foreground" |
| 26 | : "bg-secondary text-secondary-foreground hover:bg-secondary/80" |
| 27 | }`} |
| 28 | > |
| 29 | All |
| 30 | </button> |
| 31 | <button |
| 32 | onClick={() => onBanFilterChange("active")} |
| 33 | className={`cursor-pointer px-4 h-10 text-sm font-medium transition-colors border-l border-foreground/20 ${ |
| 34 | banFilter === "active" |
| 35 | ? "bg-green-600 text-white" |
| 36 | : "bg-secondary text-secondary-foreground hover:bg-secondary/80" |
| 37 | }`} |
| 38 | > |
| 39 | Active |
| 40 | </button> |
| 41 | <button |
| 42 | onClick={() => onBanFilterChange("banned")} |
| 43 | className={`cursor-pointer px-4 h-10 text-sm font-medium transition-colors border-l border-foreground/20 ${ |
| 44 | banFilter === "banned" |
| 45 | ? "bg-red-600 text-white" |
| 46 | : "bg-secondary text-secondary-foreground hover:bg-secondary/80" |
| 47 | }`} |
| 48 | > |
| 49 | Banned |
| 50 | </button> |
| 51 | </div> |
| 52 | ); |