Add footer

Author: GearsDatapacks

src/website/component.gleam

@@ -1,3 +1,4 @@
+import website/component/footer
 import lustre/attribute.{attribute}
 import lustre/element.{type Element}
 import lustre/element/html
@@ -38,6 +39,7 @@ pub fn page(name: String, content: List(Element(a))) -> Element(a) {
     html.body([attribute.class("min-h-screen bg-slate-800 text-white")], [
       header.view(name),
       html.main([attribute.class("py-24")], content),
+      footer.view(),
     ]),
   ])
 }

src/website/component/footer.gleam

@@ -0,0 +1,43 @@
+import gleam/list
+import lustre/attribute
+import lustre/element.{type Element}
+import lustre/element/html
+
+type Social {
+  Social(icon: String, name: String, url: String)
+}
+
+const socials = [
+  Social(icon: "youtube.png", name: "YouTube", url: ""),
+  Social(icon: "github.png", name: "Github", url: ""),
+  Social(icon: "bluesky.svg", name: "Bluesky", url: ""),
+  Social(icon: "modrinth.svg", name: "", url: ""),
+  Social(icon: "discord.png", name: "", url: ""),
+]
+
+pub fn view() -> Element(a) {
+  html.footer(
+    [
+      attribute.class(
+        "right-3 bottom-3 fixed h-16 bg-blue-900 p-3.5 flex flex-row gap-4 items-center overflow-hidden rounded-full",
+      ),
+    ],
+    list.map(socials, fn(social) {
+      html.a(
+        [
+          attribute.href(social.url),
+          attribute.target("_blank"),
+          attribute.class("shrink-0"),
+        ],
+        [
+          html.img([
+            attribute.src("/images/" <> social.icon),
+            attribute.alt(social.name),
+            attribute.title(social.name),
+            attribute.class("w-icon"),
+          ]),
+        ],
+      )
+    }),
+  )
+}