https://littlebirdelectronics.com.au/assets/controllers/ecommerce/code_sample_controller-1c3a529e.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4  static targets = ["tab", "panel"]
5
6  copy(event) {
7    const button = event.currentTarget
8    // Find the code element within the same card (rounded-xl container)
9    const card = button.closest(".rounded-xl")
10    const codeEl = card.querySelector("code, pre[data-language], pre")
11    if (!codeEl) return
12
13    navigator.clipboard.writeText(codeEl.textContent).then(() => {
14      const copyIcon = button.querySelector("[data-copy-icon]")
15      const checkIcon = button.querySelector("[data-check-icon]")
16      const label = button.querySelector("[data-copy-label]")
17
18      if (copyIcon && checkIcon) {
19        copyIcon.classList.add("hidden")
20        checkIcon.classList.remove("hidden")
21      }
22      if (label) {
23        const original = label.textContent
24        label.textContent = "Copied!"
25        setTimeout(() => { label.textContent = original }, 2000)
26      }
27
28      setTimeout(() => {
29        if (copyIcon && checkIcon) {
30          copyIcon.classList.remove("hidden")
31          checkIcon.classList.add("hidden")
32        }
33      }, 2000)
34    })
35  }
36
37  switchTab(event) {
38    const index = parseInt(event.currentTarget.dataset.index)
39
40    this.tabTargets.forEach((tab, i) => {
41      if (i === index) {
42        tab.classList.add("bg-gray-700", "text-white")
43        tab.classList.remove("text-gray-400", "hover:text-gray-200")
44      } else {
45        tab.classList.remove("bg-gray-700", "text-white")
46        tab.classList.add("text-gray-400", "hover:text-gray-200")
47      }
48    })
49
50    this.panelTargets.forEach((panel, i) => {
51      panel.classList.toggle("hidden", i !== index)
52    })
53  }
54}