|
@ -6,6 +6,9 @@ |
|
|
<title>Comment Thread Component</title> |
|
|
<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://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 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> |
|
|
</head> |
|
|
<body> |
|
|
<body> |
|
@ -18,7 +21,7 @@ |
|
|
<thead class="table-dark"> |
|
|
<thead class="table-dark"> |
|
|
<tr> |
|
|
<tr> |
|
|
<th scope="col">#</th> |
|
|
<th scope="col">#</th> |
|
|
<th scope="col">First Column</th> |
|
|
|
|
|
|
|
|
<th scope="col"></th> |
|
|
<th scope="col">Second Column</th> |
|
|
<th scope="col">Second Column</th> |
|
|
<th scope="col" width="30%">Comment</th> |
|
|
<th scope="col" width="30%">Comment</th> |
|
|
</tr> |
|
|
</tr> |
|
@ -37,6 +40,132 @@ |
|
|
</tbody> |
|
|
</tbody> |
|
|
</table> |
|
|
</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"> |
|
|
|
|
|
<table class="table table-hover table-bordered"> |
|
|
|
|
|
<thead class="table-dark"> |
|
|
|
|
|
<tr> |
|
|
|
|
|
<th scope="col">...</th> |
|
|
|
|
|
<th scope="col">...</th> |
|
|
|
|
|
<th scope="col">...</th> |
|
|
|
|
|
<th scope="col" width="30%">...</th> |
|
|
|
|
|
</tr> |
|
|
|
|
|
</thead> |
|
|
|
|
|
<tbody> |
|
|
|
|
|
<tr> |
|
|
|
|
|
<th scope="row">...</th> |
|
|
|
|
|
<td>...</td> |
|
|
|
|
|
<td>...</td> |
|
|
|
|
|
<td> |
|
|
|
|
|
<div class="d-flex justify-content-center align-items-center gap-1 p-2 text-muted" style="cursor:pointer"> |
|
|
|
|
|
<i class="far fa-comment text-muted"></i> Add Comment |
|
|
|
|
|
</div> |
|
|
|
|
|
</td> |
|
|
|
|
|
</tr> |
|
|
|
|
|
</tbody> |
|
|
|
|
|
</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 ( |
|
|
|
|
|
<table className="table table-hover table-bordered"> |
|
|
|
|
|
<thead> |
|
|
|
|
|
<tr> |
|
|
|
|
|
<th scope="col">#</th> |
|
|
|
|
|
<th scope="col">First Column</th> |
|
|
|
|
|
<th scope="col">Second Column</th> |
|
|
|
|
|
<th scope="col" width="30%">Comment</th> |
|
|
|
|
|
</tr> |
|
|
|
|
|
</thead> |
|
|
|
|
|
<tbody> |
|
|
|
|
|
<tr> |
|
|
|
|
|
<th scope="row">1</th> |
|
|
|
|
|
<td>Lorem Ipsum 1</td> |
|
|
|
|
|
<td>Lorem Ipsum 2</td> |
|
|
|
|
|
<td> |
|
|
|
|
|
<div className="d-flex justify-content-center align-items-center gap-1 p-2 text-muted" style={{ cursor: 'pointer' }}> |
|
|
|
|
|
<i className="far fa-comment text-muted"></i> Add Comment |
|
|
|
|
|
</div> |
|
|
|
|
|
</td> |
|
|
|
|
|
</tr> |
|
|
|
|
|
</tbody> |
|
|
|
|
|
</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"> |
|
|
|
|
|
<template> |
|
|
|
|
|
<table class="table table-hover table-bordered"> |
|
|
|
|
|
<thead> |
|
|
|
|
|
<tr> |
|
|
|
|
|
<th scope="col">#</th> |
|
|
|
|
|
<th scope="col">First Column</th> |
|
|
|
|
|
<th scope="col">Second Column</th> |
|
|
|
|
|
<th scope="col" width="30%">Comment</th> |
|
|
|
|
|
</tr> |
|
|
|
|
|
</thead> |
|
|
|
|
|
<tbody> |
|
|
|
|
|
<tr> |
|
|
|
|
|
<th scope="row">1</th> |
|
|
|
|
|
<td>Lorem Ipsum 1</td> |
|
|
|
|
|
<td>Lorem Ipsum 2</td> |
|
|
|
|
|
<td> |
|
|
|
|
|
<div class="d-flex justify-content-center align-items-center gap-1 p-2 text-muted" style="cursor:pointer"> |
|
|
|
|
|
<i class="far fa-comment text-muted"></i> Add Comment |
|
|
|
|
|
</div> |
|
|
|
|
|
</td> |
|
|
|
|
|
</tr> |
|
|
|
|
|
</tbody> |
|
|
|
|
|
</table> |
|
|
|
|
|
</template> |
|
|
|
|
|
<script> |
|
|
|
|
|
export default { |
|
|
|
|
|
name: 'MyTable', |
|
|
|
|
|
}; |
|
|
|
|
|
</script> |
|
|
|
|
|
<style scoped> |
|
|
|
|
|
/* Add your table-specific styles here */ |
|
|
|
|
|
</style> |
|
|
|
|
|
</pre></code> |
|
|
|
|
|
</div> --> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<h5 class="mt-5">Opened comment</h5> |
|
|
<h5 class="mt-5">Opened comment</h5> |
|
|
<p>Comment opened already.</p> |
|
|
<p>Comment opened already.</p> |
|
|
<table class="table table-hover table-bordered"> |
|
|
<table class="table table-hover table-bordered"> |
|
@ -332,5 +461,28 @@ |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> |
|
|
<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> |
|
|
</body> |
|
|
</html> |
|
|
</html> |