🎨 Palette: Add item counters to section headers#50
🎨 Palette: Add item counters to section headers#50google-labs-jules[bot] wants to merge 2 commits into
Conversation
- Added optional `count` prop to the `Section` component. - Implemented item counts in Skills, Certifications, Projects, Experience, and Education sections. - Used HeroUI `Chip` (variant="soft", color="primary") for clear, non-intrusive counters. - Ensured counts update dynamically based on active search and area filters. - Improved section header alignment with `items-baseline`.
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
- Added optional `count` prop to the `Section` component. - Implemented item counts in Skills, Certifications, Projects, Experience, and Education sections. - Used HeroUI `Chip` (variant="soft", color="accent") for clear, non-intrusive counters. - Fixed TypeScript error by using valid `color="accent"` for `Chip`. - Improved section header alignment with `items-baseline` and cleaned up redundant classes. - Ensured counts update dynamically based on active search and area filters.
|
This PR introduces a micro-UX improvement by adding item counters to the section headers of the portfolio.
💡 What:
A new
countprop in the genericSectioncomponent displays a small chip next to the section title, indicating the number of items currently visible in that section.🎯 Why:
The portfolio uses a unified filter bar. When users search or filter by area/skill, it's not always immediately obvious which sections have matching results if they are scrolled away. These counters provide immediate feedback and help users understand the distribution of their filtered results across the site.
♿ Accessibility:
The counters are clearly associated with the section headings and provide additional context for screen reader users when navigating the document outline.
🛠 Technical Details:
Chipfor the counters.filteredSkills,filteredCerts,filteredProjects, andfilteredPositions.items-baselinefor better visual balance between the title and the counter.PR created automatically by Jules for task 10914268045398347351 started by @amrabed