feat: users page with non working filter button

src/client/UtentiPage.tsx

@@ -48,14 +48,27 @@ export const UtentiPage = () => {
 
     return (
         <>
-            <div class="search">
-                <input
-                    type="text"
-                    placeholder="Cerca un utente Poisson..."
-                    onInput={e => ($searchText.value = e.currentTarget.value)}
-                    value={$searchText.value}
-                />
-                <span class="material-symbols-outlined">search</span>
+            <div class="search-bar">
+                <div class="filter-select">
+                    <span class="material-symbols-outlined">filter_list</span>
+                    <select>
+                        <option value="new-first">Nuovi utenti</option>
+                        <option value="old-first">Vecchi utenti</option>
+                        <option value="first-name">Nome</option>
+                        <option value="last-name">Cognome</option>
+                        <option value="uid">Username</option>
+                    </select>
+                    <span class="material-symbols-outlined">expand_more</span>
+                </div>
+                <div class="search">
+                    <input
+                        type="text"
+                        placeholder="Cerca un utente Poisson..."
+                        onInput={e => ($searchText.value = e.currentTarget.value)}
+                        value={$searchText.value}
+                    />
+                    <span class="material-symbols-outlined">search</span>
+                </div>
             </div>
             <div class="search-results">
                 {$searchResults.value ? (
@@ -69,8 +82,11 @@ export const UtentiPage = () => {
                                     </div>
                                     <div class="text">{poissonUser.gecos}</div>
                                     <div class="right">
-                                        <a href={`https://poisson.phc.dm.unipi.it/~${poissonUser.uid}`}>
-                                            <span class="material-symbols-outlined">globe</span>
+                                        <a
+                                            href={`https://poisson.phc.dm.unipi.it/~${poissonUser.uid}`}
+                                            target="_blank"
+                                        >
+                                            <span class="material-symbols-outlined">open_in_new</span>
                                         </a>
                                     </div>
                                 </div>

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

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