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

Updated no comment code preview

main
Gerard Balde 2 weeks ago
parent
3fecc9e6c3
commit
b02944381d
1 changed files with 105 additions and 104 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. 209
      index.html

209
index.html
View File

@ -21,8 +21,8 @@
<thead class="table-dark">
<tr>
<th scope="col">#</th>
<th scope="col"></th>
<th scope="col">Second Column</th>
<th scope="col">First column</th>
<th scope="col">Second column</th>
<th scope="col" width="30%">Comment</th>
</tr>
</thead>
@ -42,29 +42,29 @@
<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">
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-a-html-tab" data-bs-toggle="pill" data-bs-target="#pills-a-html" type="button" role="tab" aria-controls="pills-a-html" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-a-react-tab" data-bs-toggle="pill" data-bs-target="#pills-a-react" type="button" role="tab" aria-controls="pills-a-react" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-a-vue-tab" data-bs-toggle="pill" data-bs-target="#pills-a-vue" type="button" role="tab" aria-controls="pills-a-vue" aria-selected="false">Contact</button>
</li>
<li class="nav-item ms-auto">
<button class="btn btn-outline-dark" onclick="copyToClipboard(this)">Copy</button>
</li>
</ul>
</div>
<div class="card-body p-0">
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade active show" id="pills-a-html" role="tabpanel" aria-labelledby="pills-a-html-tab">
<pre class="mt-0"><code class="language-html">
&lt;table class="table table-hover table-bordered">
&lt;thead class="table-dark">
&lt;tr>
@ -89,81 +89,81 @@
&lt;/table>
</code></pre>
</div>
<div class="tab-pane fade" id="pills-a-react" role="tabpanel" aria-labelledby="pills-a-react-tab">
<pre class="mt-0"><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="pills-a-vue" role="tabpanel" aria-labelledby="pills-a-vue-tab">
<pre class="mt-0"><code 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>
</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>
@ -172,8 +172,8 @@
<thead class="table-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First Column</th>
<th scope="col">Second Column</th>
<th scope="col">First column</th>
<th scope="col">Second column</th>
<th scope="col" width="30%">Comment</th>
</tr>
</thead>
@ -216,8 +216,8 @@
<thead class="table-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First Column</th>
<th scope="col">Second Column</th>
<th scope="col">First column</th>
<th scope="col">Second column</th>
<th scope="col" width="30%">Comment</th>
</tr>
</thead>
@ -260,8 +260,8 @@
<thead class="table-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First Column</th>
<th scope="col">Second Column</th>
<th scope="col">First column</th>
<th scope="col">Second column</th>
<th scope="col" width="30%">Comment</th>
</tr>
</thead>
@ -464,8 +464,9 @@
<script>
// Function to copy the code block content
function copyToClipboard(divId, element) {
const preElement = document.getElementById(divId).querySelector('pre code');
function copyToClipboard(element) {
const activeTabPane = document.querySelector('.tab-pane.fade.active.show');
const preElement = document.getElementById(activeTabPane.id).querySelector('pre code');
const codeText = preElement.textContent;
const tempElement = document.createElement('textarea');

Write Preview
Loading…
Cancel
Save