Kino Text with Clipboard component

kino_text_clipboard.ex

defmodule KinoTextClipboard do
  def new(text) do
    Kino.HTML.new("""
      <style>
        .container {
            box-sizing: border-box;
            position: relative;
            width: 100%;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 10px;
        }
        .text-content {
            width: 100%;
            margin-bottom: 10px;
            word-wrap: break-word;
        }
        .clipboard-icon {
            position: absolute;
            right: 10px;
            top: 10px;
            cursor: pointer;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 5px;
        }
        .clipboard-icon:hover {
            background-color: #f0f0f0;
        }
        .copy-feedback {
            position: absolute;
            right: 40px;
            top: 13px;
            background-color: #4CAF50;
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 12px;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }
      </style>

      <div class="container">
        <div id="textContent" class="text-content">
            #{text}
        </div>
        <div class="clipboard-icon" onclick="copyToClipboard()">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
                <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
            </svg>
        </div>
        <div class="copy-feedback" id="copyFeedback">Copied</div>
      </div>

      <script>
        function copyToClipboard() {
            const textContent = document.getElementById('textContent');
            const textToCopy = textContent.innerText;

            const tempTextArea = document.createElement('textarea');
            tempTextArea.value = textToCopy;
            document.body.appendChild(tempTextArea);

            tempTextArea.select();
            document.execCommand('copy');

            document.body.removeChild(tempTextArea);

            const icon = document.querySelector('.clipboard-icon');
            const feedback = document.getElementById('copyFeedback');

            icon.style.backgroundColor = '#4CAF50';
            feedback.style.opacity = '1';

            setTimeout(() => {
                icon.style.backgroundColor = '';
                feedback.style.opacity = '0';
            }, 2000);
        }
    </script>
    """)
  end
end