|
|
@ -8,17 +8,48 @@ |
|
|
|
<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> |
|
|
|
<style> |
|
|
|
ul { |
|
|
|
list-style-type: none; |
|
|
|
padding-left: 0; |
|
|
|
} |
|
|
|
|
|
|
|
ul > li { |
|
|
|
margin-bottom: 5px; |
|
|
|
} |
|
|
|
|
|
|
|
ul > li > a { |
|
|
|
text-decoration: none; |
|
|
|
color: gray; |
|
|
|
} |
|
|
|
|
|
|
|
ul > li > a:hover { |
|
|
|
text-decoration: underline; |
|
|
|
color: black; |
|
|
|
} |
|
|
|
|
|
|
|
.nav-link { |
|
|
|
color: black; |
|
|
|
} |
|
|
|
|
|
|
|
.nav-link.active { |
|
|
|
background-color: black !important; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
|
|
</head> |
|
|
|
<body> |
|
|
|
<div class="container my-5"> |
|
|
|
<div class="row"> |
|
|
|
<div class="col-10"> |
|
|
|
|
|
|
|
<h1>Comment Thread Component</h3> |
|
|
|
|
|
|
|
<h5 class="mt-4">No comment</h5> |
|
|
|
<h5 class="mt-4" id="component-a">No comment</h5> |
|
|
|
<p>No comment yet. Display clickable add comment text with icon.</p> |
|
|
|
<table class="table table-hover table-bordered"> |
|
|
|
<thead class="table-dark"> |
|
|
|
<thead class="table-light"> |
|
|
|
<tr> |
|
|
|
<th scope="col">#</th> |
|
|
|
<th scope="col">First column</th> |
|
|
@ -65,7 +96,7 @@ |
|
|
|
<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"> |
|
|
|
<table class="table table-hover table-bordered"> |
|
|
|
<thead class="table-dark"> |
|
|
|
<thead class="table-light"> |
|
|
|
<tr> |
|
|
|
<th scope="col">...</th> |
|
|
|
<th scope="col">...</th> |
|
|
@ -165,10 +196,10 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<h5 class="mt-5">Opened Comment</h5> |
|
|
|
<h5 class="mt-5" id="component-b">Opened Comment</h5> |
|
|
|
<p>Comment opened already.</p> |
|
|
|
<table class="table table-hover table-bordered"> |
|
|
|
<thead class="table-dark"> |
|
|
|
<thead class="table-light"> |
|
|
|
<tr> |
|
|
|
<th scope="col">#</th> |
|
|
|
<th scope="col">First column</th> |
|
|
@ -234,7 +265,7 @@ |
|
|
|
<div class="tab-pane fade active show" id="pills-b-html" role="tabpanel" aria-labelledby="pills-b-html-tab"> |
|
|
|
<pre class="mt-0"><code class="language-html"> |
|
|
|
<table class="table table-hover table-bordered"> |
|
|
|
<thead class="table-dark"> |
|
|
|
<thead class="table-light"> |
|
|
|
<tr> |
|
|
|
<th scope="col">...</th> |
|
|
|
<th scope="col">...</th> |
|
|
@ -280,7 +311,7 @@ |
|
|
|
const TableComponent = () => { |
|
|
|
return ( |
|
|
|
<table className="table table-hover table-bordered"> |
|
|
|
<thead className="table-dark"> |
|
|
|
<thead className="table-light"> |
|
|
|
<tr> |
|
|
|
<th scope="col">...</th> |
|
|
|
<th scope="col">...</th> |
|
|
@ -333,7 +364,7 @@ |
|
|
|
<pre class="mt-0"><code class="language-html"> |
|
|
|
<template> |
|
|
|
<table class="table table-hover table-bordered"> |
|
|
|
<thead class="table-dark"> |
|
|
|
<thead class="table-light"> |
|
|
|
<tr> |
|
|
|
<th scope="col">...</th> |
|
|
|
<th scope="col">...</th> |
|
|
@ -394,10 +425,10 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<h5 class="mt-5">Open Comment Modal</h5> |
|
|
|
<h5 class="mt-5" id="component-c">Open Comment Modal</h5> |
|
|
|
<p>Click comment area to open comment modal.</p> |
|
|
|
<table class="table table-hover table-bordered"> |
|
|
|
<thead class="table-dark"> |
|
|
|
<thead class="table-light"> |
|
|
|
<tr> |
|
|
|
<th scope="col">#</th> |
|
|
|
<th scope="col">First column</th> |
|
|
@ -438,7 +469,6 @@ |
|
|
|
</tbody> |
|
|
|
</table> |
|
|
|
|
|
|
|
|
|
|
|
<!-- Code Preview --> |
|
|
|
<div class="row"> |
|
|
|
<div class="col"> |
|
|
@ -861,7 +891,19 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="col-2 text-muted"> |
|
|
|
<div class="sticky-top"> |
|
|
|
<p class="h6">CONTENTS</p> |
|
|
|
<hr> |
|
|
|
<ul> |
|
|
|
<li><a href="#component-a" class="mt-1">No Comment</a></li> |
|
|
|
<li><a href="#component-b">With/Opened Comment</a></li> |
|
|
|
<li><a href="#component-c">Unread/Open Comment Modal</a></li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
@ -1026,9 +1068,21 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<footer class="bg-light"> |
|
|
|
<div class="text-center pt-3"> |
|
|
|
<p> |
|
|
|
Copyright © 2024 |
|
|
|
<strong>Comment Thread</strong> by <a href="https://github.com/princegideon15" target="_blank">Gerard Balde</a>. |
|
|
|
Check out the source code on |
|
|
|
<a href="https://github.com/princegideon15/comment-thread-component.git" target="_blank">GitHub</a>. |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</footer> |
|
|
|
|
|
|
|
<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(element, tabPaneId) { |
|
|
|
console.log("🚀 ~ copyToClipboard ~ element, tabPaneId:", tabPaneId) |
|
|
|