From 546aa2c027ba41402bc832d6396fcba47974b819 Mon Sep 17 00:00:00 2001 From: Veronica Song Date: Sun, 14 Dec 2025 02:51:50 -0500 Subject: [PATCH 1/2] Created FilterButton component --- .../src/app/lib/Components/FilterButton.tsx | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 apps/live/src/app/lib/Components/FilterButton.tsx diff --git a/apps/live/src/app/lib/Components/FilterButton.tsx b/apps/live/src/app/lib/Components/FilterButton.tsx new file mode 100644 index 00000000..8dcdfb9b --- /dev/null +++ b/apps/live/src/app/lib/Components/FilterButton.tsx @@ -0,0 +1,57 @@ +import React, {useState} from 'react'; +import useIsMobile from "@repo/util/hooks/useIsMobile"; + +interface ButtonProps { + backgroundColor: string; + textColor: string; + text: string; + borderColor?: string; + hoverBGColor?: string; + hoverText?: string; +} + +const FilterButton: React.FC = ({ + backgroundColor, + textColor, + text, + borderColor, + hoverBGColor, + hoverText, +}) => { + const [isHovered, setIsHovered] = useState(false); + + const isMobile = useIsMobile(); + + const baseStyle: React.CSSProperties = { + backgroundColor: backgroundColor, + color: textColor, + borderWidth: 1, + borderStyle: 'solid', + borderColor, + cursor: 'pointer', + transition: 'background-color 0.2s ease, color 0.2s ease', + }; + + const hoverStyle: React.CSSProperties = { + ...(hoverBGColor ? { backgroundColor: hoverBGColor } : {}), + ...(hoverText ? { color: hoverText } : {}), + ...(hoverBGColor ? { borderColor: hoverBGColor } : {}), + }; + + const finalStyle = { + ...baseStyle, + ...(isHovered && !isMobile ? hoverStyle : {}), + }; + + return ( + + ); +}; + +export default FilterButton; \ No newline at end of file From fdf87ddaafacacdd9d996110df98066e368d92d2 Mon Sep 17 00:00:00 2001 From: Veronica Song Date: Mon, 5 Jan 2026 17:55:21 -0500 Subject: [PATCH 2/2] Fixed the Filter Button Component --- .../src/app/lib/Components/FilterButton.tsx | 115 ++++++++++++------ 1 file changed, 81 insertions(+), 34 deletions(-) diff --git a/apps/live/src/app/lib/Components/FilterButton.tsx b/apps/live/src/app/lib/Components/FilterButton.tsx index 8dcdfb9b..02af5346 100644 --- a/apps/live/src/app/lib/Components/FilterButton.tsx +++ b/apps/live/src/app/lib/Components/FilterButton.tsx @@ -1,5 +1,4 @@ -import React, {useState} from 'react'; -import useIsMobile from "@repo/util/hooks/useIsMobile"; +import React from "react"; interface ButtonProps { backgroundColor: string; @@ -8,47 +7,95 @@ interface ButtonProps { borderColor?: string; hoverBGColor?: string; hoverText?: string; + hoverBorderColor?: string; + onClick?: () => void; } -const FilterButton: React.FC = ({ - backgroundColor, - textColor, +const bgColorMap: Record = { + canopyGreenLight: "bg-canopyGreenLight", + canopyGreen:"bg-canopyGreen", + mossGreen: "bg-mossGreen", + mossGreenDark: "bg-mossGreenDark", + firecrackerRedLight: "bg-firecrackerRedLight", + firecrackerRed: "bg-firecrackerRed", +}; + +const textColorMap: Record = { + charcoalFog: "text-[#353131]", + white: "text-white", + canopyGreenLight: "text-canopyGreenLight", +}; + +const borderColorMap: Record = { + canopyGreenLight: "border-canopyGreenLight", + canopyGreen:"bg-canopyGreen", + mossGreen: "border-mossGreen", + mossGreenDark: "border-mossGreenDark", + firecrackerRed: "border-firecrackerRed", + firecrackerRedLight: "border-firecrackerRedLight", +}; + +const hoverBgColorMap: Record = { + canopyGreenLight: "hover:bg-canopyGreenLight", + canopyGreen: "hover:bg-canopyGreen", + mossGreen: "hover:bg-mossGreen", + mossGreenDark: "hover:bg-mossGreenDark", + firecrackerRed: "hover:bg-firecrackerRed", +}; + +const hoverTextColorMap: Record = { + white: "hover:text-white", + charcoalFog: "hover:text-[#353131]", + canopyGreenLight: "hover:text-canopyGreenLight", +}; + +const hoverBorderColorMap: Record = { + white: "hover:border-white", + canopyGreenLight: "hover:border-canopyGreenLight", + canopyGreen:"bg-canopyGreen", + mossGreen: "hover:border-mossGreen", + mossGreenDark: "hover:border-mossGreenDark", + firecrackerRed: "hover:border-firecrackerRed", +}; + +const FilterButton: React.FC = ({ + backgroundColor, + textColor, text, borderColor, hoverBGColor, hoverText, + hoverBorderColor, + onClick, }) => { - const [isHovered, setIsHovered] = useState(false); - - const isMobile = useIsMobile(); - - const baseStyle: React.CSSProperties = { - backgroundColor: backgroundColor, - color: textColor, - borderWidth: 1, - borderStyle: 'solid', - borderColor, - cursor: 'pointer', - transition: 'background-color 0.2s ease, color 0.2s ease', - }; - - const hoverStyle: React.CSSProperties = { - ...(hoverBGColor ? { backgroundColor: hoverBGColor } : {}), - ...(hoverText ? { color: hoverText } : {}), - ...(hoverBGColor ? { borderColor: hoverBGColor } : {}), - }; - - const finalStyle = { - ...baseStyle, - ...(isHovered && !isMobile ? hoverStyle : {}), - }; + const bgClass = bgColorMap[backgroundColor] ?? bgColorMap.mossGreen; + const textClass = textColorMap[textColor] ?? textColorMap.charcoalFog; + const borderClass = borderColor + ? borderColorMap[borderColor] + : "border-transparent"; + const hoverBgClass = hoverBGColor + ? hoverBgColorMap[hoverBGColor] + : "hover:bg-transparent"; + const hoverTextClass = hoverText + ? hoverTextColorMap[hoverText] + : "hover:text-white"; + const hoverBorderClass = hoverBorderColor + ? hoverBorderColorMap[hoverBorderColor] + : "hover:border-white"; + const baseStyle = `font-NeulisNeue-Bold flex items-center justify-center gap-1 rounded-lg w-auto h-auto py-1 whitespace-nowrap border border-solid transition-transform duration-200 ease-in-out hover:scale-105 hover:border-[1.5px] active:brightness-90 + ${bgClass} + ${textClass} + ${borderClass} + ${hoverBgClass} + ${hoverTextClass} + ${hoverBorderClass} + ${text ? "px-4" : "px-2"} + `; + return ( - );