this repo has no description
better
+69
-5
+69
-5
values-react-app/src/components/FlashcardSorter.tsx
+69
-5
values-react-app/src/components/FlashcardSorter.tsx
···
8
8
9
9
// Import type
10
10
11
-
// Define assignment categories for Part 1/2
11
+
// Reorder categories and define colors/bg for progress bar
12
12
const assignmentCategories = [
13
-
{ id: 'veryImportant', title: 'Very Important', variant: 'primary' as const, swipeDir: 'Down' },
14
-
{ id: 'important', title: 'Important', variant: 'secondary' as const, swipeDir: 'Right' },
15
-
{ id: 'notImportant', title: 'Not Important', variant: 'secondary' as const, swipeDir: 'Left' },
13
+
{
14
+
id: 'notImportant',
15
+
title: 'Not Important',
16
+
variant: 'secondary' as const,
17
+
swipeDir: 'Left',
18
+
color: 'text-red-600',
19
+
bgColor: 'bg-red-500',
20
+
},
21
+
{
22
+
id: 'important',
23
+
title: 'Important',
24
+
variant: 'secondary' as const,
25
+
swipeDir: 'Right',
26
+
color: 'text-yellow-600',
27
+
bgColor: 'bg-yellow-500',
28
+
},
29
+
{
30
+
id: 'veryImportant',
31
+
title: 'Very Important',
32
+
variant: 'primary' as const,
33
+
swipeDir: 'Down',
34
+
color: 'text-green-600',
35
+
bgColor: 'bg-green-500',
36
+
},
16
37
];
38
+
const remainingCategory = { id: 'unassigned', color: 'text-gray-500', bgColor: 'bg-gray-300' };
17
39
18
40
// Define minimum swipe distance threshold (pixels)
19
41
const SWIPE_THRESHOLD = 60;
···
43
65
currentCardIdRef.current = nextUnassignedCard.id;
44
66
}
45
67
68
+
// Calculate counts
69
+
const categoryCounts = assignmentCategories.reduce(
70
+
(acc, category) => {
71
+
acc[category.id] = cards.filter((card) => card.column === category.id).length;
72
+
return acc;
73
+
},
74
+
{} as Record<string, number>,
75
+
);
46
76
const unassignedCount = cards.filter((card) => card.column === 'unassigned').length;
77
+
const totalCards = cards.length; // Total cards for percentage calculation
47
78
48
79
// Reset swipe state visually
49
80
const resetSwipeState = () => {
···
151
182
return (
152
183
// Use height of parent
153
184
<div className="flex flex-col items-center w-full max-w-md mx-auto h-full pt-2 pb-2">
154
-
<p className="mb-2 text-sm text-gray-500 flex-shrink-0">{unassignedCount} remaining</p>
185
+
{/* Status Area */}
186
+
<div className="w-full px-4 mb-2 flex-shrink-0">
187
+
{/* Text Indicators - Stacked */}
188
+
<div className="flex justify-between w-full text-xs mb-1">
189
+
{' '}
190
+
{/* Smaller text */}
191
+
<span className={remainingCategory.color}>{unassignedCount} remaining</span>
192
+
<div className="flex space-x-2">
193
+
{assignmentCategories.map((cat) => (
194
+
<span key={cat.id} className={`${cat.color} font-medium`}>
195
+
{/* Shorten labels? */} {cat.title.split(' ')[0]}: {categoryCounts[cat.id] ?? 0}
196
+
</span>
197
+
))}
198
+
</div>
199
+
</div>
200
+
{/* Progress Bar */}
201
+
<div className="w-full h-2 bg-gray-200 rounded overflow-hidden flex">
202
+
{' '}
203
+
{/* Bar container */}
204
+
{/* Remaining Segment */}
205
+
<div
206
+
className={remainingCategory.bgColor}
207
+
style={{ width: `${totalCards > 0 ? (unassignedCount / totalCards) * 100 : 0}%` }}
208
+
></div>
209
+
{/* Assigned Segments */}
210
+
{assignmentCategories.map((cat) => (
211
+
<div
212
+
key={cat.id}
213
+
className={cat.bgColor}
214
+
style={{ width: `${totalCards > 0 ? ((categoryCounts[cat.id] ?? 0) / totalCards) * 100 : 0}%` }}
215
+
></div>
216
+
))}
217
+
</div>
218
+
</div>
155
219
156
220
{/* Card area: Allow shrinking if needed, handle internal overflow */}
157
221
<div className="flex-grow w-full flex items-center justify-center p-4 relative overflow-hidden min-h-0 overflow-y-auto">