diff --git a/src/components/ProjectList.astro b/src/components/ProjectList.astro index 8a8806b8..05e43be2 100644 --- a/src/components/ProjectList.astro +++ b/src/components/ProjectList.astro @@ -2,22 +2,54 @@ import ProjectCard from './ProjectCard.astro'; import { projectList } from '../data/projects.js'; -// Get all unique tags for filtering -const allTags = [...new Set(projectList.flatMap(project => project.tags || []))].sort(); +// Get all unique tags for filtering, ignoring casing so duplicate values share one option +const tagOptions = projectList + .flatMap(project => project.tags || []) + .reduce((tags, tag) => { + const normalizedTag = tag.toLowerCase(); + + if (!tags.has(normalizedTag)) { + tags.set(normalizedTag, tag); + } + + return tags; + }, new Map()); +const allTags = [...tagOptions.values()].sort((firstTag, secondTag) => + firstTag.localeCompare(secondTag, undefined, { sensitivity: 'base' }) +); ---
+
- {allTags.map(tag => ( @@ -131,11 +163,29 @@ const allTags = [...new Set(projectList.flatMap(project => project.tags || []))] .inputContainer { flex: 1; min-width: 250px; + position: relative; + } + + .inputIcon { + width: 1.125rem; + height: 1.125rem; + position: absolute; + left: 1rem; + top: 50%; + transform: translateY(-50%); + color: rgba(255, 255, 255, 0.68); + fill: none; + stroke: currentColor; + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; + pointer-events: none; + z-index: 1; } #search { width: 100%; - padding: 1rem 1.25rem; + padding: 1rem 1.25rem 1rem 3rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; background: rgba(255, 255, 255, 0.1); @@ -157,7 +207,7 @@ const allTags = [...new Set(projectList.flatMap(project => project.tags || []))] #tag-selector { width: 100%; - padding: 1rem 1.25rem; + padding: 1rem 1.25rem 1rem 3rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; background: rgba(255, 255, 255, 0.1); @@ -198,8 +248,12 @@ const allTags = [...new Set(projectList.flatMap(project => project.tags || []))] min-width: unset; } + .inputIcon { + left: 0.875rem; + } + #search, #tag-selector { - padding: 0.875rem 1rem; + padding: 0.875rem 1rem 0.875rem 2.75rem; font-size: 0.95rem; }