Add many interactive components

- Version selector for MidnightLib is now finally working
- Added buttons to copy code from code blocks
- Added color chooser in Puzzle wiki

src/components/ColorPicker.astro

@@ -0,0 +1,71 @@
+---
+interface Props {
+  includeHashtag?: boolean
+}
+const { includeHashtag } = Astro.props
+import { Icon } from 'astro-icon/components'
+---
+
+<section class="my-6">
+  <div class="">
+    <p class="text-lg">Select a color below to get the hex code:</p>
+    <div class="flex">
+      <fieldset>
+        <input
+          type="color"
+          id="color-select"
+          class="h-16 w-48 hover:cursor-pointer rounded-xl border-neutral-900 dark:border-neutral-100 border-4"
+        />
+      </fieldset>
+      <button
+        id="copy-button"
+        class="button has-icon color-secondary ml-3 rounded-md text-white hover:cursor-pointer appearance-none h-16">
+        <Icon id="copy-icon" name="ion:copy-outline" />
+        <Icon id="success-icon" name="ion:checkmark-outline" class="hidden" />
+        <p id="color-label">{includeHashtag ? '#' : ''}000000</p>
+    </div>
+  </div>
+</section>
+
+<script>
+  // Get the 2 elements from above
+  const colorLabel = document.getElementById("color-label");
+  const colorSelect = document.getElementById("color-select");
+  const copyButton = document.getElementById("copy-button");
+
+  const copyIcon = document.getElementById("copy-icon");
+  const successIcon = document.getElementById("success-icon");
+
+  colorSelect?.addEventListener("change", async (e) => {
+    const {
+      target: { value }, // Returns the chosen color (already in hex format :D)
+    } = e;
+    if (colorLabel) colorLabel.innerText = colorLabel.innerText.startsWith('#') ? value : value.replace('#', '');
+  });
+
+  // Add event listener to copy the color to the clipboard
+  if (colorLabel) copyButton?.addEventListener('click', () => copyString(colorLabel.innerText, copyButton));
+  
+
+  async function copyString(text: string, button: HTMLElement) {
+    await navigator.clipboard.writeText(text);
+
+    // visual feedback that task is completed
+    if (button) {
+      button.style.backgroundColor = "#"+text.replace('#', '');
+      button.style.borderColor = "#"+text.replace('#', '');
+    }
+    if (copyIcon) copyIcon.style.display = 'none';
+    if (successIcon) successIcon.style.display = 'initial';
+
+    setTimeout(() => {
+      if (button) {
+        button.style.backgroundColor = 'var(--secondary-100)';
+        button.style.borderColor = 'var(--secondary-100)';
+      }
+      if (copyIcon) copyIcon.style.display = 'initial';
+      if (successIcon) successIcon.style.display = 'none';
+    }, 1000);
+  }
+
+</script>