|
3 | 3 | import Hero from '@/components/Hero.svelte';
|
4 | 4 | import IconTextAction from '@/components/IconTextAction.svelte';
|
5 | 5 | import SubscribeBox from '@/components/SubscribeBox.svelte';
|
6 |
| - import Badge from '@/components/Badge.svelte'; |
7 | 6 | import ProjectCard from '@/components/Cards/ProjectCard.svelte';
|
8 |
| - export let data |
9 |
| - const { projects } = data |
| 7 | + import MenuTagsProject from '@/components/MenuTagsProject.svelte'; |
| 8 | + export let data; |
| 9 | + const { projects, tags } = data; |
| 10 | + let activeTags = []; |
| 11 | + let filteredProjects = [...projects]; |
| 12 | +
|
| 13 | + const getFilteredProjects = () => { |
| 14 | + const setToLowerCase = (item = '') => item?.toLowerCase(); |
| 15 | + const areTagsIncluded = (item = '') => activeTags?.includes(item); |
| 16 | +
|
| 17 | + filteredProjects = Boolean(activeTags?.length) |
| 18 | + ? projects.filter(project => project.tags?.map(setToLowerCase).some(areTagsIncluded)) |
| 19 | + : [...projects]; |
| 20 | + } |
| 21 | +
|
| 22 | + const addToFilter = (tag = '') => { |
| 23 | + if (activeTags.includes(tag)) { |
| 24 | + return false; |
| 25 | + } |
| 26 | +
|
| 27 | + tag = tag.toLowerCase(); |
| 28 | + activeTags.push(tag); |
| 29 | + getFilteredProjects(); |
| 30 | + } |
| 31 | +
|
| 32 | + const removeFromFilter = (tag = '') => { |
| 33 | + tag = tag.toLowerCase(); |
| 34 | + activeTags = activeTags.filter(val => val !== tag); |
| 35 | + getFilteredProjects(); |
| 36 | + } |
10 | 37 |
|
11 | 38 | updateMenuSelector({url: '/proyectos'})
|
12 | 39 | </script>
|
|
30 | 57 |
|
31 | 58 | <section id="nuestros-proyectos" class="container mx-auto my-12 p-3">
|
32 | 59 | <h1 class="text-4xl font-bold my-3">Conoce nuestros proyectos</h1>
|
33 |
| - <!-- TODO: Habilitar Badges --> |
34 |
| - <!-- <div class="flex gap-4 my-6 flex-wrap"> |
35 |
| - <Badge text="Movilidad" color="#F3F3F4"/> |
36 |
| - <Badge text="Educación" color="#F2D301"/> |
37 |
| - <Badge text="Legislativo" color="#F3F3F4"/> |
38 |
| - <Badge text="Datos abiertos" color="#F3F3F4"/> |
39 |
| - <Badge text="Código abierto" color="#F3F3F4"/> |
40 |
| - </div> --> |
41 |
| - <!-- <div class="flex flex-col basis-1/3 md:flex-row columns-3 container my-8 mx-auto gap-20"> --> |
42 |
| - <div class="grid grid-cols-1 md:grid-cols-3 container my-8 mx-auto gap-20"> |
43 |
| - {#each projects as project} |
| 60 | + <div class="flex gap-4 my-6 flex-wrap"> |
| 61 | + <MenuTagsProject tags={tags} addToFilter={addToFilter} removeFromFilter={removeFromFilter} /> |
| 62 | + </div> |
| 63 | + <div class="grid grid-cols-1 md:grid-cols-3 container my-8 mx-auto gap-20"> |
| 64 | + {#each filteredProjects as project} |
44 | 65 | <div class="my-5">
|
45 | 66 | <ProjectCard
|
46 | 67 | title={project.title}
|
|
0 commit comments