+

+
+
+
+
{track.title}
+
+ {track.categories.map((item: any, idx: number) => (
+
+ {item.category.category}{" "}
+
+ ))}
+
+
{truncatedDescription}
-
{truncatedDescription}
-
-
-
-
- {track.problems.length} Chapters
-
-
- {formatDistanceToNow(new Date(track.createdAt), { addSuffix: true })}
-
-
-
- {track.problems.map((topic: any, idx: number) => (
-
-
-
- ))}
+
+
+
+ {track.problems.length} Chapters
+
+
+ {formatDistanceToNow(new Date(track.createdAt), { addSuffix: true })}
+
+
+
+ {track.problems.map((topic: any, idx: number) => (
+
+
+
+ ))}
+
+
+
+
-
-
-
diff --git a/apps/web/components/Tracks.tsx b/apps/web/components/Tracks.tsx
index 9baa3c08..334ccbdf 100644
--- a/apps/web/components/Tracks.tsx
+++ b/apps/web/components/Tracks.tsx
@@ -61,8 +61,20 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
const filterTracks = () => {
setLoading(true);
- setFilteredTracks(tracks.filter((t) => selectedCohort === 3 ? t.cohort === 3 : t.cohort !== 3));
+
+ setFilteredTracks(
+ tracks.filter((t) => {
+ const cohortMatch = selectedCohort === null || t.cohort === selectedCohort;
+ const catagoryMatch =
+ selectedCategory === "" ||
+ selectedCategory == "All" ||
+ t.categories[0]?.category.category == selectedCategory;
+
+ return cohortMatch && catagoryMatch;
+ })
+ );
setCurrentPage(1); // Reset to first page on filtering
+
setLoading(false);
};
@@ -79,11 +91,12 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
sortedTracks.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
}
setFilteredTracks(sortedTracks);
+
setLoading(false);
};
const handleCohortSelection = (cohort: number) => {
- setSelectedCohort((prevCohort) => (prevCohort === cohort ? null : cohort));
+ setSelectedCohort(cohort);
};
useEffect(() => {
@@ -119,11 +132,11 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
initial={{ y: -20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.5, ease: "easeInOut", type: "spring", damping: 10, delay: 0.5 }}
- className="flex max-w-5xl flex-col gap-4 w-full mx-auto p-4"
+ className="mx-auto flex w-full max-w-5xl flex-col gap-4 p-4"
id="tracks"
>
-
-
+
+
-
+
-
+
{/* Filter by Categories */}
-
-