diff --git a/src/client/UtentiPage.tsx b/src/client/UtentiPage.tsx
index 9681719..0e3d619 100644
--- a/src/client/UtentiPage.tsx
+++ b/src/client/UtentiPage.tsx
@@ -48,14 +48,27 @@ export const UtentiPage = () => {
return (
<>
-
-
($searchText.value = e.currentTarget.value)}
- value={$searchText.value}
- />
-
search
+
+
+ filter_list
+
+ expand_more
+
+
+ ($searchText.value = e.currentTarget.value)}
+ value={$searchText.value}
+ />
+ search
+
{$searchResults.value ? (
@@ -69,8 +82,11 @@ export const UtentiPage = () => {
{poissonUser.gecos}
diff --git a/src/styles/components.scss b/src/styles/components.scss
index 73431bb..6fbf75f 100644
--- a/src/styles/components.scss
+++ b/src/styles/components.scss
@@ -598,4 +598,53 @@
.show-more {
place-self: center;
}
+
+ .search-bar {
+ display: grid;
+ grid-template-columns: auto 1fr;
+
+ width: 100%;
+
+ gap: 1rem;
+ }
+
+ .filter-select {
+ width: 100%;
+ height: 2.5rem;
+
+ @include neo-brutalist-card;
+
+ display: grid;
+ align-items: center;
+ grid-auto-flow: column;
+
+ cursor: pointer;
+
+ --filter-bg-color-hover: color-mix(in srgb, var(--filter-bg-color, #ddd), #000 10%);
+
+ background: var(--filter-bg-color, #ddd);
+
+ &:hover,
+ &:hover select {
+ background: var(--filter-bg-color-hover);
+ }
+
+ .material-symbols-outlined {
+ padding: 0 0.35rem;
+ }
+
+ select {
+ border: none;
+ box-shadow: none;
+ outline: none;
+ height: 100%;
+ appearance: none;
+
+ cursor: pointer;
+
+ padding: 0;
+
+ background: var(--filter-bg-color, #ddd);
+ }
+ }
}
diff --git a/src/styles/pages.scss b/src/styles/pages.scss
index 1267f5c..04731e3 100644
--- a/src/styles/pages.scss
+++ b/src/styles/pages.scss
@@ -241,6 +241,8 @@
.utenti {
background: #ffffe4;
+ --filter-bg-color: #ffd270;
+
main {
justify-self: center;
@@ -248,11 +250,12 @@
flex-direction: column;
align-items: center;
- max-width: 80ch;
padding: 5rem 0;
gap: 5rem;
+ max-width: 80ch;
+
.search-result {
background: #ffeabc;
}