Add macchinisti page (WIP)

src/components/Bubble.astro

@@ -0,0 +1,47 @@
+---
+import iconGithub from 'lucide-static/icons/github.svg'
+import iconLinkedin from 'lucide-static/icons/linkedin.svg'
+import iconGlobe from 'lucide-static/icons/globe.svg'
+import iconMail from 'lucide-static/icons/mail.svg'
+
+const ICONS_MAP = {
+    github: iconGithub,
+    linkedin: iconLinkedin,
+    website: iconGlobe,
+    mail: iconMail,
+}
+
+type Props = {
+    image: ImageMetadata
+    fullName: string
+    date: string
+    description: string
+    social?: {
+        github?: string
+        linkedin?: string
+        website?: string
+        mail?: string
+    }
+}
+
+const { image, fullName, date, description, social } = Astro.props
+---
+
+<div class="bubble">
+    <img src={image.src} alt={fullName.toLowerCase()} />
+    <div class="title">{fullName}</div>
+    <div class="date">{date}</div>
+    <div class="description">{description}</div>
+    {
+        social && (
+            <div class="social">
+                {Object.entries(social).map(([key, value]) => (
+                    <a href={value} target="_blank" rel="noopener noreferrer">
+                        {/* @ts-ignore */}
+                        <img src={ICONS_MAP[key].src} alt={key} />
+                    </a>
+                ))}
+            </div>
+        )
+    }
+</div>

src/components/Header.astro

@@ -5,6 +5,7 @@
     <input type="checkbox" id="header-menu-toggle" />
     <div class="links desktop-only">
         <a role="button" href="/utenti">Utenti</a>
+        <a role="button" href="/macchinisti">Macchinisti</a>
         <!-- <a role="button" href="/appunti">Appunti</a> -->
         <a role="button" href="/notizie">Notizie</a>
         <a role="button" href="/guide">Guide</a>
@@ -22,6 +23,7 @@
     <div class="side-menu">
         <div class="links">
             <a role="button" href="/utenti">Utenti</a>
+            <a role="button" href="/macchinisti">Macchinisti</a>
             <!-- <a role="button" href="/appunti">Appunti</a> -->
             <a role="button" href="/notizie">Notizie</a>
             <a role="button" href="/guide">Guide</a>