Skip to content

Created FilterButtons #356

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
VeroS-pdf wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

Created FilterButtons #356

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9a3d44d
Added back assets to About Us section
VeroS-pdf Nov 22, 2025
546aa2c
Created FilterButton component
VeroS-pdf Dec 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 57 additions & 0 deletions apps/live/src/app/lib/Components/FilterButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import React, {useState} from 'react';
import useIsMobile from "@repo/util/hooks/useIsMobile";

interface ButtonProps {
Copy link
Contributor

@agonzalez22 agonzalez22 Dec 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we want to try and use as much tailwind as possible! This works but you can still pass a bg color as a param w/ tailwind. ex:

bg-${backgroundColor}

same for hover or on mouse enter-- in tailwind you can do such by
hover:bg-${hoverBackgroundColor}

backgroundColor: string;
textColor: string;
text: string;
borderColor?: string;
hoverBGColor?: string;
hoverText?: string;
}

const FilterButton: React.FC<ButtonProps> = ({
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 (
<button className = "w-[10vw] h-auto"
style={finalStyle}
onMouseEnter={!isMobile ? () => setIsHovered(true) : undefined}
onMouseLeave={!isMobile ? () => setIsHovered(false) : undefined}
Copy link
Contributor

@agonzalez22 agonzalez22 Dec 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use hover: in tailwind and also might want to use active: in tailwind because we want to show the user that these buttons have been pressed.

>
{text}
</button>
);
};

export default FilterButton;
22 changes: 12 additions & 10 deletions apps/main/src/app/(landing)/Sections/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,26 @@
import React from "react";
import TextBackground from "../../lib/Assets/AboutLandingAssets/text";
import TeamPicture from "../../lib/Assets/AboutLandingAssets/teamPicture";
// import PurpleBear from "../../lib/Assets/AboutLandingAssets/purpleBear";
// import YellowBear from "../../lib/Assets/AboutLandingAssets/yellowBear";
import PurpleBear from "../../lib/Assets/AboutLandingAssets/purpleBear";
import YellowBear from "../../lib/Assets/AboutLandingAssets/yellowBear";
import RibbonTitle from "@repo/ui/RibbonTitle";
// import Dart from "../../lib/Assets/AboutLandingAssets/dart";
import Dart from "../../lib/Assets/AboutLandingAssets/dart";
import useDevice from "@util/hooks/useDevice";

export default function About(): React.ReactNode {
const { isMobile } = useDevice();
return (
<div className="relative w-full my-10 overflow-hidden">
<div className="relative w-full max-w-[1400px] mx-auto overflow-visible p-[clamp(2rem,6vw,8rem)]">
<div className={`${isMobile ? "transform scale-[0.85]" : ""}`}>
<RibbonTitle text="ABOUT US" />
</div>

{/* <div className="absolute top-[20%] left-[80%]">
{<div className="absolute w-[160vw] h-auto top-[20%] left-[80%]">
<YellowBear />
</div> */}
</div>}

<div className="mt-[15vh] mobile:mt-20 flex desktop:flex-row mobile:flex-col mobile:items-center items-start justify-center scale-125">
<div className="relative flex mobile:w-3/5">
<div className="relative flex h-auto mobile:w-3/5">
<p className="text-charcoalFogDark mobile:text-xs font-DMSans-Regular absolute h-full mobile:p-12 desktop:py-20 desktop:px-16 desktop-xl:py-20 desktop-xl:px-16 self-center">
We&apos;re a non-profit organization in the Boston area that
organizes an annual undergraduate hackathon. Our goal is to expand
Expand All @@ -39,12 +39,14 @@ export default function About(): React.ReactNode {
</div>
</div>

{/* <div className="absolute top-[68%] left-[46%] mb-10">
<div className="absolute w-[160vw] h-auto top-[68%] left-[46%] mb-10">
<PurpleBear />
</div>
<div className="absolute top-[68%] left-[79%] mb-10">

<div className="absolute w-[160vw] h-auto top-[78%] left-[79%] mb-10">
<Dart />
</div> */}
</div>

</div>
);
}