aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2025-12-18 15:14:20 +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 filters = [
{ type: 'all' as const, icon: faAsterisk, label: 'All' },
{ type: 'unopened' as const, icon: faEnvelope, label: 'Unopened' },
{ type: 'started' as const, icon: faEnvelopeOpen, label: 'Started' },
{ type: 'reading' as const, icon: faBookOpen, label: 'Reading' },
{ type: 'completed' as const, icon: faCheckCircle, label: 'Completed' }
{ type: 'all' as const, icon: faAsterisk, label: 'All', color: undefined },
{ type: 'unopened' as const, icon: faEnvelope, label: 'Unopened', color: undefined },
{ type: 'started' as const, icon: faEnvelopeOpen, label: 'Started', color: 'var(--color-text)' },
{ type: 'reading' as const, icon: faBookOpen, label: 'Reading', color: '#6366f1' },
{ type: 'completed' as const, icon: faCheckCircle, label: 'Completed', color: '#10b981' }
]
return (
<div className="bookmark-filters">
{filters.map(filter => (
<button
key={filter.type}
onClick={() => onFilterChange(filter.type)}
className={`filter-btn ${selectedFilter === filter.type ? 'active' : ''}`}
title={filter.label}
aria-label={`Filter by ${filter.label}`}
>
<FontAwesomeIcon icon={filter.icon} />
</button>
))}
{filters.map(filter => {
const isActive = selectedFilter === filter.type
const activeStyle = isActive && filter.color ? { color: filter.color } : undefined
return (
<button
key={filter.type}
onClick={() => onFilterChange(filter.type)}
className={`filter-btn ${isActive ? 'active' : ''}`}
title={filter.label}
aria-label={`Filter by ${filter.label}`}
style={activeStyle}
>
<FontAwesomeIcon icon={filter.icon} />
</button>
)
})}
</div>
)
}