phc/website
6
4
Fork 1
Code Issues 9 Pull Requests Projects 1 Releases Wiki Activity

feat: utenti page and poisson integration

Browse Source
This commit is contained in:
aziis98
2024-10-06 02:45:49 +02:00
parent a87c87eb10
commit 7e99cfa9d7
5 changed files with 70 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/UtentiPage.tsx
+54
View File
@@ -0,0 +1,54 @@
import { useSignal } from '@preact/signals'
import { useEffect } from 'preact/hooks'
type User = {
uid: string
gecos: string
}
function applyPatches(users: User[]) {
users.forEach(user => {
// strip ",+" from the end of the gecos field
user.gecos = user.gecos.replace(/,+$/, '')
// capitalize the first letter of each word
user.gecos = user.gecos.replace(/\b\w/g, c => c.toUpperCase())
})
}
export const UtentiPage = () => {
const utentiSignal = useSignal<User[]>([])
useEffect(() => {
fetch('https://poisson.phc.dm.unipi.it/users.json')
.then(response => response.json())
.then(data => {
applyPatches(data)
utentiSignal.value = data
})
}, [])
return (
<>
<div class="search">
<input type="text" placeholder="Cerca un utente Poisson..." />
<span class="material-symbols-outlined">search</span>
</div>
<div class="search-results">
{utentiSignal.value.map(user => (
<div class="search-result">
<div class="icon">
<span class="material-symbols-outlined">person</span>
</div>
<div class="text">{user.gecos}</div>
<div class="right">
<a href={`https://poisson.phc.dm.unipi.it/~${user.uid}`}>
<span class="material-symbols-outlined">globe</span>
</a>
</div>
</div>
))}
</div>
</>
)
}
src/components/Header.astro
+1 -1
View File
@@ -3,7 +3,7 @@
<img src="/images/logo-circuit-board.svg" alt="phc logo" />
</a>
<div class="links">
<!-- <a role="button" href="/utenti">Utenti</a> -->
<a role="button" href="/utenti">Utenti</a>
<!-- <a role="button" href="/appunti">Appunti</a> -->
<a role="button" href="/notizie">Notizie</a>
<a role="button" href="/guide">Guide</a>
src/pages/utenti.astro
+3 -35
View File
@@ -1,42 +1,10 @@
---
import PageLayout from '../layouts/PageLayout.astro'
import { UtentiPage } from '../client/UtentiPage.tsx'
---
<PageLayout pageTags="utenti">
<h1>Utenti</h1>
<div class="search">
<input type="text" />
<span class="material-symbols-outlined">search</span>
</div>
<div class="search-results">
<div class="search-result">
<div class="icon"><span class="material-symbols-outlined">person</span></div>
<div class="text">Persona 1</div>
<div class="right">
<a href="#">
<span class="material-symbols-outlined">globe</span>
</a>
</div>
</div>
<div class="search-result">
<span class="material-symbols-outlined">person</span>
<div class="text">Persona 2</div>
<div class="right">
<a href="#">
<span class="material-symbols-outlined">globe</span>
</a>
</div>
</div>
<div class="search-result">
<span class="material-symbols-outlined">person</span>
<div class="text">Persona 3</div>
<div class="right">
<a href="#">
<span class="material-symbols-outlined">globe</span>
</a>
</div>
</div>
</div>
<UtentiPage client:load />
</PageLayout>
src/styles/pages.scss
+11 -11
View File
@@ -238,20 +238,20 @@
}
}
// .utenti {
// main {
// justify-self: center;
.utenti {
main {
justify-self: center;
// display: flex;
// flex-direction: column;
// align-items: center;
display: flex;
flex-direction: column;
align-items: center;
// max-width: 80ch;
// padding: 5rem 0;
max-width: 80ch;
padding: 5rem 0;
// gap: 5rem;
// }
// }
gap: 5rem;
}
}
// .appunti {
// main {