Added copy code button for the example code.

Oia20 · Apr 27, 2024 · 277bca9 · 277bca9
1 parent 15b09cd
commit 277bca9
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 1 deletion.
diff --git a/CropSQL/Pages/Components/Terminal.razor b/CropSQL/Pages/Components/Terminal.razor
@@ -67,12 +67,21 @@
     <h2>Prompt</h2>
 
     <p>@prompt[termNum - 1]</p>
+    <div class="flex-row">
     <h3>Example:</h3>
-    <div class="exampleCode">
+    <button class="copy-button" @onclick="CopyToClipboard">
+        <span>Copy Code</span>
+        <!-- You can use an icon here if you prefer -->
+        <!-- Example: <i class="fas fa-copy"></i> -->
+    </button>
+    </div>
+    <div class="exampleCode" @onclick="CopyToClipboard">
+
         @foreach (string lines in codeSample[termNum - 1])
         {
             <p class="code-line">@string.Join(" ", lines)</p>
         }
+
     </div>
     </div>
 </div>
@@ -95,6 +104,11 @@
     {
         isDropdownVisible = !isDropdownVisible;
     }
+    private async Task CopyToClipboard()
+    {
+        var codeContent = string.Join("\n", codeSample[termNum - 1]);
+        await JSRuntime.InvokeVoidAsync("copyToClipboard", codeContent);
+    }
     private void ButtonClicked() {
         AddCommand(currentInput);
         currentInput = ""; // Clear the input field

diff --git a/CropSQL/Pages/Components/Terminal.razor.css b/CropSQL/Pages/Components/Terminal.razor.css
@@ -112,6 +112,8 @@ h2 {
 
 h3 {
     text-align: left;
+    display: flex;
+    align-items: center;
 }
 
 
@@ -218,4 +220,29 @@ h3 {
 
 .code-line {
     text-align: left;
+}
+
+.copy-button {
+    bottom: 5px; /* Adjust the positioning as needed */
+    right: 5px; /* Adjust the positioning as needed */
+    padding: 5px 10px;
+    background-color: rgba(49, 87, 54, 0.664);
+    border: 2px solid #e8a073; /* Solid border */
+    border-radius: 20px;
+    color: #f4d35d;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    margin: 14px;
+}
+
+.copy-button:hover {
+    color:#f4d35d;
+    background-color: #e8a073;
+    border-color: rgba(49, 87, 54, 0.664);
+}
+
+.flex-row {
+    display: flex;
+    flex-direction: row;
 }
diff --git a/CropSQL/wwwroot/index.html b/CropSQL/wwwroot/index.html
@@ -34,6 +34,9 @@
             inputRef.value = ""
             return
         }
+        window.copyToClipboard = function(text) {
+            navigator.clipboard.writeText(text);
+        }
     </script>
 
 </body>