aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2025-12-18 23:24:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: color reading progress filter icons when active

Browse Source
This commit is contained in:
Gigi
2025-10-16 09:30:16 +02:00
parent aff5bff03b
commit 2c913cf7e8
1 changed files with 22 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/ReadingProgressFilters.tsx
View File

@@ -12,26 +12,32 @@ interface ReadingProgressFiltersProps {
const ReadingProgressFilters: React.FC<ReadingProgressFiltersProps> = ({ selectedFilter, onFilterChange }) => { const ReadingProgressFilters: React.FC<ReadingProgressFiltersProps> = ({ selectedFilter, onFilterChange }) => {
const filters = [ const filters = [
{ type: 'all' as const, icon: faAsterisk, label: 'All' }, { type: 'all' as const, icon: faAsterisk, label: 'All', color: undefined },
{ type: 'unopened' as const, icon: faEnvelope, label: 'Unopened' }, { type: 'unopened' as const, icon: faEnvelope, label: 'Unopened', color: undefined },
{ type: 'started' as const, icon: faEnvelopeOpen, label: 'Started' }, { type: 'started' as const, icon: faEnvelopeOpen, label: 'Started', color: 'var(--color-text)' },
{ type: 'reading' as const, icon: faBookOpen, label: 'Reading' }, { type: 'reading' as const, icon: faBookOpen, label: 'Reading', color: '#6366f1' },
{ type: 'completed' as const, icon: faCheckCircle, label: 'Completed' } { type: 'completed' as const, icon: faCheckCircle, label: 'Completed', color: '#10b981' }
] ]
return ( return (
<div className="bookmark-filters"> <div className="bookmark-filters">
{filters.map(filter => ( {filters.map(filter => {
<button const isActive = selectedFilter === filter.type
key={filter.type} const activeStyle = isActive && filter.color ? { color: filter.color } : undefined
onClick={() => onFilterChange(filter.type)}
className={`filter-btn ${selectedFilter === filter.type ? 'active' : ''}`} return (
title={filter.label} <button
aria-label={`Filter by ${filter.label}`} key={filter.type}
> onClick={() => onFilterChange(filter.type)}
<FontAwesomeIcon icon={filter.icon} /> className={`filter-btn ${isActive ? 'active' : ''}`}
</button> title={filter.label}
))} aria-label={`Filter by ${filter.label}`}
style={activeStyle}
>
<FontAwesomeIcon icon={filter.icon} />
</button>
)
})}
</div> </div>
) )
} }