gpdbalde
/
comment-thread-component
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Added copy function

main
Gerard Balde 2 weeks ago
parent
ca5921a859
commit
3fecc9e6c3
1 changed files with 154 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 156
      index.html

156
index.html
View File

@ -6,7 +6,10 @@
<title>Comment Thread Component</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.js"></script>
</head>
<body>
<div class="container my-5">
@ -18,7 +21,7 @@
<thead class="table-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First Column</th>
<th scope="col"></th>
<th scope="col">Second Column</th>
<th scope="col" width="30%">Comment</th>
</tr>
@ -37,6 +40,132 @@
</tbody>
</table>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="a-html" role="tabpanel" aria-labelledby="a-html-tab">
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">
<ul class="nav nav-pills" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="btn btn-dark rounded-pill active" id="a-html-tab" data-bs-toggle="pill" data-bs-target="#a-html" type="button" role="tab" aria-controls="a-html" aria-selected="true">HTML</button>
</li>
<!-- <li class="nav-item" role="presentation">
<button class="nav-link" id="a-react-tab" data-bs-toggle="pill" data-bs-target="#a-react" type="button" role="tab" aria-controls="a-react" aria-selected="false">React.js</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="a-vue-tab" data-bs-toggle="pill" data-bs-target="#a-vue" type="button" role="tab" aria-controls="a-vue" aria-selected="false">Vue.js</button>
</li> -->
<li class="nav-item ms-auto">
<button class="btn btn-outline-dark" onclick="copyToClipboard('a-html-code', this)">Copy</button>
</li>
</ul>
</div>
<div class="card-body p-0" id="a-html-code">
<pre><code class="language-html">
&lt;table class="table table-hover table-bordered">
&lt;thead class="table-dark">
&lt;tr>
&lt;th scope="col">...&lt;/th>
&lt;th scope="col">...&lt;/th>
&lt;th scope="col">...&lt;/th>
&lt;th scope="col" width="30%">...&lt;/th>
&lt;/tr>
&lt;/thead>
&lt;tbody>
&lt;tr>
&lt;th scope="row">...&lt;/th>
&lt;td>...&lt;/td>
&lt;td>...&lt;/td>
&lt;td>
&lt;div class="d-flex justify-content-center align-items-center gap-1 p-2 text-muted" style="cursor:pointer">
&lt;i class="far fa-comment text-muted">&lt;/i> Add Comment
&lt;/div>
&lt;/td>
&lt;/tr>
&lt;/tbody>
&lt;/table>
</code></pre>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="tab-pane fade" id="a-react" role="tabpanel" aria-labelledby="a-react-tab">
<pre><code class="language-html">
import React from 'react';
import './styles.css'; // Assuming you have a CSS file for styling
function MyTable() {
return (
&lt;table className="table table-hover table-bordered">
&lt;thead>
&lt;tr>
&lt;th scope="col">#&lt;/th>
&lt;th scope="col">First Column&lt;/th>
&lt;th scope="col">Second Column&lt;/th>
&lt;th scope="col" width="30%">Comment&lt;/th>
&lt;/tr>
&lt;/thead>
&lt;tbody>
&lt;tr>
&lt;th scope="row">1&lt;/th>
&lt;td>Lorem Ipsum 1&lt;/td>
&lt;td>Lorem Ipsum 2&lt;/td>
&lt;td>
&lt;div className="d-flex justify-content-center align-items-center gap-1 p-2 text-muted" style={{ cursor: 'pointer' }}>
&lt;i className="far fa-comment text-muted">&lt;/i> Add Comment
&lt;/div>
&lt;/td>
&lt;/tr>
&lt;/tbody>
&lt;/table>
);
}
export default MyTable;
</code></pre>
</div>
<div class="tab-pane fade" id="a-vue" role="tabpanel" aria-labelledby="a-vue-tab">
<code><pre class="language-html">
&lt;template>
&lt;table class="table table-hover table-bordered">
&lt;thead>
&lt;tr>
&lt;th scope="col">#&lt;/th>
&lt;th scope="col">First Column&lt;/th>
&lt;th scope="col">Second Column&lt;/th>
&lt;th scope="col" width="30%">Comment&lt;/th>
&lt;/tr>
&lt;/thead>
&lt;tbody>
&lt;tr>
&lt;th scope="row">1&lt;/th>
&lt;td>Lorem Ipsum 1&lt;/td>
&lt;td>Lorem Ipsum 2&lt;/td>
&lt;td>
&lt;div class="d-flex justify-content-center align-items-center gap-1 p-2 text-muted" style="cursor:pointer">
&lt;i class="far fa-comment text-muted">&lt;/i> Add Comment
&lt;/div>
&lt;/td>
&lt;/tr>
&lt;/tbody>
&lt;/table>
&lt;/template>
&lt;script>
export default {
name: 'MyTable',
};
&lt;/script>
&lt;style scoped>
/* Add your table-specific styles here */
&lt;/style>
</pre></code>
</div> -->
</div>
<h5 class="mt-5">Opened comment</h5>
<p>Comment opened already.</p>
<table class="table table-hover table-bordered">
@ -332,5 +461,28 @@
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Function to copy the code block content
function copyToClipboard(divId, element) {
const preElement = document.getElementById(divId).querySelector('pre code');
const codeText = preElement.textContent;
const tempElement = document.createElement('textarea');
tempElement.value = codeText;
document.body.appendChild(tempElement);
tempElement.select();
document.execCommand('copy');
element.textContent = 'Copied!';
element.classList.add('active');
setTimeout(function(){
element.textContent = 'Copy';
element.classList.remove('active');
}, 2000)
}
</script>
</body>
</html>
Write Preview
Loading…
Cancel
Save