Include the dark mode toggle on the home page (#15)

It looks like this was intended to be there, but missing an icon. The
button has been extracted out into the components module.

Author: Gazler

src/hexdocs/view/components.gleam

@@ -1,4 +1,9 @@
+import hexdocs/data/model.{type Model}
+import hexdocs/data/msg
 import lustre/attribute.{class}
+import lustre/element
+import lustre/element/html
+import lustre/event
 
 pub fn input_classes() {
   [
@@ -12,3 +17,18 @@ pub fn input_classes() {
     ),
   ]
 }
+
+pub fn dark_mode_toggle(model: Model) -> element.Element(msg.Msg) {
+  html.button([class("p-2"), event.on_click(msg.UserToggledDarkMode)], [
+    html.i(
+      [
+        class("theme-icon text-xl text-slate-700 dark:text-slate-300"),
+        class(case model.dark_mode.mode {
+          msg.Dark -> "ri-sun-line"
+          msg.Light -> "ri-moon-line"
+        }),
+      ],
+      [],
+    ),
+  ])
+}

src/hexdocs/view/home.gleam

@@ -14,7 +14,6 @@ import lustre/element/html
 import lustre/event
 
 pub fn home(model: Model) {
-  let toggle_mode = event.on_click(msg.UserToggledDarkMode)
   html.div([class("bg-white dark:bg-gray-900")], [
     html.div(
       [
@@ -28,22 +27,19 @@ pub fn home(model: Model) {
       [
         html.main([class("grow")], [
           html.section([], [
-            html.div([id("nav"), class("flex justify-between items-center")], [
-              html.a(
-                [
-                  attribute.href("https://hex.pm/"),
-                  class("text-sm text-gray-600 dark:text-gray-100"),
-                ],
-                [html.text("← Go back to Hex")],
-              ),
-              html.button(
-                [
-                  toggle_mode,
-                  class("p-3 text-gray-700 dark:text-gray-100 mt-10"),
-                ],
-                [html.i([class("theme-icon text-xl")], [])],
-              ),
-            ]),
+            html.div(
+              [id("nav"), class("flex justify-between items-center mt-2")],
+              [
+                html.a(
+                  [
+                    attribute.href("https://hex.pm/"),
+                    class("text-sm text-gray-600 dark:text-gray-100"),
+                  ],
+                  [html.text("← Go back to Hex")],
+                ),
+                html.div([], [components.dark_mode_toggle(model)]),
+              ],
+            ),
             html.div(
               [class("flex flex-col justify-around mt-14 md:mt-26 lg:mt-40")],
               [

src/hexdocs/view/search.gleam

@@ -298,23 +298,7 @@ pub fn search(model: Model) {
                 [],
               ),
             ]),
-            html.button(
-              [class("p-2"), event.on_click(msg.UserToggledDarkMode)],
-              [
-                html.i(
-                  [
-                    class(
-                      "theme-icon text-xl text-slate-700 dark:text-slate-300",
-                    ),
-                    class(case model.dark_mode.mode {
-                      msg.Dark -> "ri-sun-line"
-                      msg.Light -> "ri-moon-line"
-                    }),
-                  ],
-                  [],
-                ),
-              ],
-            ),
+            components.dark_mode_toggle(model),
           ]),
         ]),
         html.div([class("flex flex-col mx-auto max-w-[800px]")], {