diff --git a/site/assets/home.js b/site/assets/home.js index 29a26786..bc605f62 100644 --- a/site/assets/home.js +++ b/site/assets/home.js @@ -26,6 +26,23 @@ function setupTabs(tabAttr, panelAttr) { // Pause the wall when it can't be seen (scrolled away) or shouldn't move // (prefers-reduced-motion — the CSS also hides it there). +function setupCodeCardName() { + const nameEl = document.getElementById("lp-codecard-name"); + if (!nameEl) return; + const names = { + solid: "Counter.tsx", + vue: "Counter.vue", + octane: "Counter.tsrx", + }; + const tabs = [...document.querySelectorAll("[data-code-tab]")]; + for (const tab of tabs) { + tab.addEventListener("click", () => { + const key = tab.dataset.codeTab; + if (key && names[key]) nameEl.textContent = names[key]; + }); + } +} + function setupDemoWall() { const video = document.querySelector(".lp-hero__wall-video"); if (!video) return; @@ -75,6 +92,7 @@ function setupPocketStage() { } setupTabs("code-tab", "code-panel"); +setupCodeCardName(); setupTabs("tgt-tab", "tgt-panel"); setupDemoWall(); setupPocketStage(); diff --git a/site/home.html b/site/home.html index 2a339f25..2dda8b30 100644 --- a/site/home.html +++ b/site/home.html @@ -176,7 +176,7 @@

Write the app you already know how to write.

- Counter.tsx + Counter.tsx
@@ -197,34 +197,42 @@

Write the app you already know how to write.

</View> ); } - + </View> +}