feat: add interactive homepage layout lab

exampleSite/assets/js/home.js

@@ -26,6 +26,32 @@ window.addEventListener("DOMContentLoaded", (event) => {
   );
 });
 
+function initLayoutLab() {
+  const lab = document.querySelector("[data-layout-lab]");
+  if (!lab) return;
+
+  const buttons = lab.querySelectorAll("[data-layout-preview-button]");
+  const panels = lab.querySelectorAll("[data-layout-preview-panel]");
+  const activate = (layout) => {
+    buttons.forEach((button) => {
+      const active = button.dataset.layoutPreviewButton === layout;
+      button.setAttribute("aria-selected", String(active));
+      button.classList.toggle("bg-primary-600", active);
+      button.classList.toggle("text-white", active);
+      button.classList.toggle("dark:border-primary-600", active);
+    });
+    panels.forEach((panel) => {
+      panel.hidden = panel.dataset.layoutPreviewPanel !== layout;
+    });
+  };
+
+  buttons.forEach((button) => {
+    button.addEventListener("click", () => activate(button.dataset.layoutPreviewButton));
+  });
+}
+
+window.addEventListener("DOMContentLoaded", initLayoutLab);
+
 var list_config = ["CardViewProse", "CardViewScreenWidth", "NormalView"];
 
 var titles = {