From 975586aa61d37a68b7527979178003bd4af84283 Mon Sep 17 00:00:00 2001
From: Qiyun Dai <pianoquin@gmail.com>
Date: Sat, 30 Mar 2024 21:19:17 -0500
Subject: [PATCH] reverting from preact approach

---
 .../checkbox-component.css}                   |  0
 .../checkbox-component/checkbox-component.js  | 16 +++++++++
 blocks/checkbox-section/checkbox-section.js   | 35 -------------------
 3 files changed, 16 insertions(+), 35 deletions(-)
 rename blocks/{checkbox-section/checkbox-section.css => checkbox-component/checkbox-component.css} (100%)
 create mode 100644 blocks/checkbox-component/checkbox-component.js
 delete mode 100644 blocks/checkbox-section/checkbox-section.js

diff --git a/blocks/checkbox-section/checkbox-section.css b/blocks/checkbox-component/checkbox-component.css
similarity index 100%
rename from blocks/checkbox-section/checkbox-section.css
rename to blocks/checkbox-component/checkbox-component.css
diff --git a/blocks/checkbox-component/checkbox-component.js b/blocks/checkbox-component/checkbox-component.js
new file mode 100644
index 00000000..91b4f2d0
--- /dev/null
+++ b/blocks/checkbox-component/checkbox-component.js
@@ -0,0 +1,16 @@
+export default function init(el) {
+  const incasingFormHandler = el.closest('.form-handler');
+  if (!incasingFormHandler) return;
+
+  const heading = el.querySelector('h2')?.textContent.trim();
+  const tooltip = el.querySelector('p > em')?.textContent.trim();
+  const checkboxes = Array.from(el.querySelectorAll('ul > li'))?.map((li) => li.textContent.trim());
+  const props = {
+    heading,
+    tooltip,
+    checkboxes,
+  };
+
+  el.innerHTML = '';
+  console.log(props);
+}
diff --git a/blocks/checkbox-section/checkbox-section.js b/blocks/checkbox-section/checkbox-section.js
deleted file mode 100644
index 7e4ef61b..00000000
--- a/blocks/checkbox-section/checkbox-section.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { getLibs } from '../../scripts/utils.js';
-
-const { html, render, useState } = await import(`${getLibs()}/deps/htm-preact.js`);
-
-const CheckboxSection = (props) => {
-  const [checked, setChecked] = useState(false);
-  
-  return html`
-  <section>
-    <h2>${props.heading}</h2>
-    <div>tooltip placeholder</div>
-    ${props.checkboxes.map((checkboxName) => html`
-      <input type="checkbox" id="scales" name="scales" checked=${checked} />
-      <label for="scales">${checkboxName}</label>
-      `)}
-  </section>
-`;
-};
-
-export default function init(el) {
-  const incasingFormHandler = el.closest('.form-handler');
-  if (!incasingFormHandler) return;
-
-  const heading = el.querySelector('h2')?.textContent.trim();
-  const tooltip = el.querySelector('p > em')?.textContent.trim();
-  const checkboxes = Array.from(el.querySelectorAll('ul > li'))?.map((li) => li.textContent.trim());
-  const props = {
-    heading,
-    tooltip,
-    checkboxes,
-  };
-
-  el.innerHTML = '';
-  render(html`<${() => CheckboxSection(props)} />`, el);
-}