diff --git a/src/pages/Activities/activities.scss b/src/pages/Activities/activities.scss
index b901eb2..4ad711f 100644
--- a/src/pages/Activities/activities.scss
+++ b/src/pages/Activities/activities.scss
@@ -7,3 +7,31 @@
.activity-feature-image {
width: 80px;
}
+
+.inactiveTab, .activeTab {
+ padding: 6px 18px;
+ text-decoration: none;
+ margin-right: 15px;
+}
+
+.inactiveTab {
+ border: 1px solid $light-gray;
+ background-color: transparent;
+ color: $brand-color;
+}
+
+.activeTab {
+ background-color: $green;
+ color: $white;
+ border: 1px solid $green;
+}
+
+.activeTab > span, .inactiveTab > span {
+ padding: 5px;
+ background-color: $brand-color;
+ border-radius: 50px;
+ font-size: 10px;
+ color: $white;
+ line-height: 1.5;
+ vertical-align: middle;
+}
diff --git a/src/pages/Activities/index.js b/src/pages/Activities/index.js
index a5837bc..4531372 100644
--- a/src/pages/Activities/index.js
+++ b/src/pages/Activities/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
import { Container, Row, Col } from 'react-bootstrap';
import PageLayout from 'components/PageLayout';
@@ -6,7 +6,7 @@ import OrganizationFeature from 'components/OrganizationFeature';
import EventCard from 'components/EventCard';
import Constants from 'constants';
-import { sortByDesc } from 'utils';
+import { sortByDesc, capitalize } from 'utils';
import projectoEducacao from '../../assets/projeto_educacao.png';
import inclusaoDigital from '../../assets/inclusao_digital.png';
@@ -76,6 +76,21 @@ function Activities({ translation }) {
})
.sort((a, b) => sortByDesc(a, b, 'date'));
+ const categories = Array.from(new Set(activities.map(item => item.category.label)));
+
+ const calculateCategoryTotal = (category) => {
+ return activitiesRefined && activitiesRefined.filter((item) => item.category.label === category).length;
+ };
+
+ const total = activitiesRefined && activitiesRefined.length;
+ const [selectedCategory, setSelectedCategory] = useState('');
+
+ const handleCategoryClick = (category) => {
+ setSelectedCategory(category);
+ };
+
+ const filteredEvents = selectedCategory ? activitiesRefined.filter((event) => event.category.label === selectedCategory) : activitiesRefined;
+
return (
}
@@ -83,8 +98,20 @@ function Activities({ translation }) {
descriptionParagraphs={[translation('ActivitiesPage-Description')]}
breadcrumbsData={breadcrumbs}>
+
+ {categories.map((category, index) => (
+
+ ))}
- {activitiesRefined.map((item, key) => (
+ {filteredEvents.map((item, key) => (
diff --git a/src/utils.js b/src/utils.js
index fdac405..960fdec 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -52,3 +52,7 @@ export function importAll(r) {
});
return images;
}
+
+export function capitalize(word) {
+ return word.charAt(0).toUpperCase() + word.slice(1);
+}
\ No newline at end of file