diff --git a/CropSQL/Pages/Components/Terminal.razor b/CropSQL/Pages/Components/Terminal.razor index 7efca01..843f565 100644 --- a/CropSQL/Pages/Components/Terminal.razor +++ b/CropSQL/Pages/Components/Terminal.razor @@ -67,12 +67,21 @@

Prompt

@prompt[termNum - 1]

+

Example:

-
+ +
+
+ @foreach (string lines in codeSample[termNum - 1]) {

@string.Join(" ", lines)

} +
@@ -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 index 696c127..a7a8bfa 100644 --- 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; } \ No newline at end of file diff --git a/CropSQL/wwwroot/index.html b/CropSQL/wwwroot/index.html index 1618a4f..18e46cc 100644 --- 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); + }