edb/neuf-www
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

search: add results counter with styling

Browse Source
This commit is contained in:
elise
2024-08-09 15:46:31 +02:00
parent 229fece375
commit e98aa722bb
2 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/components/search/SearchContainer.tsx
View File

@ -55,7 +55,7 @@ const PAGE_TYPES: Record<string, string> = {
function SearchResults({ results }: { results: any }) { function SearchResults({ results }: { results: any }) {
if (!results.length) { if (!results.length) {
return <div>Ingen resultater 😔</div>; return <div className={styles.noResults}>Ingen resultater</div>;
} }
const supportedResults = results.filter( const supportedResults = results.filter(
(result: any) => (result: any) =>
@ -63,6 +63,7 @@ function SearchResults({ results }: { results: any }) {
); );
return ( return (
<div> <div>
<p className={styles.resultsCounter}>{results.length} resultater</p>
{supportedResults.map((result: any) => { {supportedResults.map((result: any) => {
let resultType = PAGE_TYPES[result.__typename] ?? ""; let resultType = PAGE_TYPES[result.__typename] ?? "";
if (result.__typename === "AssociationPage") { if (result.__typename === "AssociationPage") {

10
web/src/components/search/searchContainer.module.scss
View File

@ -1,6 +1,6 @@
.searchContainer { .searchContainer {
max-width: var(--size-width-lead); max-width: var(--size-width-lead);
margin: 0 auto; margin: 0 auto var(--spacing-section-bottom);
} }
.searchField { .searchField {
@ -37,3 +37,11 @@
letter-spacing: 0.05em; letter-spacing: 0.05em;
margin-bottom: 1em; margin-bottom: 1em;
} }
.resultsCounter {
margin: var(--spacing-s) 0;
}
.noResults {
margin: var(--spacing-s) 0 var(--spacing-section-bottom);
}