Skip to content

Conversation

@VeroS-pdf
Copy link
Contributor

Created new FilterButtons Component

🎫 Issue #346

▶ Changelist:

  • Created a new FilterButtons component in lib/ Components section
  • Accepts params BG color, text color, text, border color (optional), hover BG color (optional), hover text (optional)
  • Scales based on screen size

📝 Notes + 🚧 TODO:

  • tbh I am not sure if I tested correctly for mobile, but button did not seem comically large in inspect/ iPhone 14 screen size

🎥 Screenshots & Screencasts:

Screenshot 2025-12-14 at 2 57 06 AM

@vercel
Copy link

vercel bot commented Dec 14, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
core-live Ready Ready Preview, Comment Dec 14, 2025 7:57am
core-main Ready Ready Preview, Comment Dec 14, 2025 7:57am

import React, {useState} from 'react';
import useIsMobile from "@repo/util/hooks/useIsMobile";

interface ButtonProps {
Copy link
Contributor

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}

<button className = "w-[10vw] h-auto"
style={finalStyle}
onMouseEnter={!isMobile ? () => setIsHovered(true) : undefined}
onMouseLeave={!isMobile ? () => setIsHovered(false) : undefined}
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants