filters page Atividades #210

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;
+}

src/pages/Activities/index.js

@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Container, Row, Col } from 'react-bootstrap';
 
 import PageLayout from 'components/PageLayout';
 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,15 +76,42 @@ 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 (
     <PageLayout
       customBanner={<ActivitiesFeaturesBanner t={translation} />}
       title={translation('ActivitiesPage-PageName')}
       descriptionParagraphs={[translation('ActivitiesPage-Description')]}
       breadcrumbsData={breadcrumbs}>
       <Container fluid="md" className="">
+        <button onClick={() => handleCategoryClick('')} className={`${selectedCategory === '' ? 'activeTab' : 'inactiveTab'} rounded-pill`}>
+          Todos <span>{total}</span>
+        </button>
+        {categories.map((category, index) => (
+          <button 
+            key={index}
+            onClick={() => handleCategoryClick(category)} 
+            className={`${selectedCategory === category ? 'activeTab' : 'inactiveTab'} rounded-pill`}
+          >
+            {capitalize(category)} <span>{calculateCategoryTotal(category)}</span>
+          </button>
+        ))}
         <Row className={'mt-4 mb-5'} xs={1} lg={4}>
-          {activitiesRefined.map((item, key) => (
+          {filteredEvents.map((item, key) => (
             <Col key={key} className={'mt-4'}>
               <span className={'event-card-wrapper'}>
                 <EventCard item={item} key={item.id} />

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);
+}