|
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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> <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" 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-light"> <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> <!-- Code Preview --> <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="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">HTML</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">React</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">Vue</button> </li> <li class="nav-item ms-auto"> <button class="btn btn-outline-dark" onclick="copyToClipboard(this, 'pills-a-tabContent')">Copy</button> </li> </ul> </div> <div class="card-body p-0"> <div class="tab-content" id="pills-a-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"> <table class="table table-hover table-bordered"> <thead class="table-light"> <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 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 ( <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="pills-a-vue" role="tabpanel" aria-labelledby="pills-a-vue-tab"> <pre class="mt-0"><code 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> </code></pre> </div> </div> </div> </div> </div> </div> <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-light"> <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="card bg-light rounded-4" style="cursor:pointer"> <div class="card-body d-flex gap-1 gap-2 mb-0 p-2"> <!-- Replace src based on your actual directory and file --> <img src="/public/default.png" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:24px; max-width:26px"> <div class="d-flex flex-column col" style="width:inherit !important"> <div class="d-flex justify-content-between gap-4"> <div class="card-title text-truncate text-xs"> <!-- Username --> Juan Dela Cruz </div> <div class="text-end text-muted text-xxs"> <!-- Latest comment date & time --> 08 Aug 2024 01:06 PM </div> </div> <p class="card-text text-truncate text-xs" style="width:300px !important"> <!-- Cemment content here --> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p> </div> </div> </div> </td> </tr> </tbody> </table> <!-- Code Preview --> <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="nav-link active" id="pills-b-html-tab" data-bs-toggle="pill" data-bs-target="#pills-b-html" type="button" role="tab" aria-controls="pills-b-html" aria-selected="true">HTML</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="pills-b-react-tab" data-bs-toggle="pill" data-bs-target="#pills-b-react" type="button" role="tab" aria-controls="pills-b-react" aria-selected="false">React</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="pills-b-vue-tab" data-bs-toggle="pill" data-bs-target="#pills-b-vue" type="button" role="tab" aria-controls="pills-b-vue" aria-selected="false">Vue</button> </li> <li class="nav-item ms-auto"> <button class="btn btn-outline-dark" onclick="copyToClipboard(this, 'pills-b-tabContent')">Copy</button> </li> </ul> </div> <div class="card-body p-0"> <div class="tab-content" id="pills-b-tabContent"> <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-light"> <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="card bg-light rounded-4" style="cursor:pointer"> <div class="card-body d-flex gap-1 gap-2 mb-0 p-2"> <img src="/public/default.png" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:24px; max-width:26px"> <div class="d-flex flex-column col" style="width:inherit !important"> <div class="d-flex justify-content-between gap-4"> <div class="card-title text-truncate text-xs"> Juan Dela Cruz </div> <div class="text-end text-muted text-xxs"> 08 Aug 2024 01:06 PM </div> </div> <p class="card-text text-truncate text-xs" style="width:300px !important"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p> </div> </div> </div> </td> </tr> </tbody> </table> </code></pre> </div> <div class="tab-pane fade" id="pills-b-react" role="tabpanel" aria-labelledby="pills-b-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 const TableComponent = () => { return ( <table className="table table-hover table-bordered"> <thead className="table-light"> <tr> <th scope="col">...</th> <th scope="col">...</th> <th scope="col">...</th> <th scope="col" style={{ width: '30%' }}>...</th> </tr> </thead> <tbody> <tr> <th scope="row">...</th> <td>...</td> <td>...</td> <td> <div className="card bg-light rounded-4" style={{ cursor: 'pointer' }}> <div className="card-body d-flex gap-1 gap-2 mb-0 p-2"> <img src="/public/default.png" alt="..." className="rounded-circle" style={{ height: 'auto', width: 'auto', maxHeight: '24px', maxWidth: '26px' }} /> <div className="d-flex flex-column col" style={{ width: 'inherit !important' }}> <div className="d-flex justify-content-between gap-4"> <div className="card-title text-truncate text-xs"> Juan Dela Cruz </div> <div className="text-end text-muted text-xxs"> 08 Aug 2024 01:06 PM </div> </div> <p className="card-text text-truncate text-xs" style={{ width: '300px !important' }}> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> </div> </div> </td> </tr> </tbody> </table> ); }; export default TableComponent; </code></pre> </div> <div class="tab-pane fade" id="pills-b-vue" role="tabpanel" aria-labelledby="pills-b-vue-tab"> <pre class="mt-0"><code class="language-html"> <template> <table class="table table-hover table-bordered"> <thead class="table-light"> <tr> <th scope="col">...</th> <th scope="col">...</th> <th scope="col">...</th> <th scope="col" style="width: 30%;">...</th> </tr> </thead> <tbody> <tr> <th scope="row">...</th> <td>...</td> <td>...</td> <td> <div class="card bg-light rounded-4" style="cursor: pointer;"> <div class="card-body d-flex gap-1 gap-2 mb-0 p-2"> <img src="/public/default.png" alt="..." class="rounded-circle" style="height: auto; width: auto; max-height: 24px; max-width: 26px;" /> <div class="d-flex flex-column col" style="width: inherit !important;"> <div class="d-flex justify-content-between gap-4"> <div class="card-title text-truncate text-xs"> Juan Dela Cruz </div> <div class="text-end text-muted text-xxs"> 08 Aug 2024 01:06 PM </div> </div> <p class="card-text text-truncate text-xs" style="width: 300px !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> </div> </div> </td> </tr> </tbody> </table> </template> <script> export default { name: 'TableComponent', }; </script> <style scoped> /* Add scoped styles if necessary */ </style> </code></pre> </div> </div> </div> </div> </div> </div> <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-light"> <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="card bg-light rounded-4" style="cursor:pointer" data-bs-toggle="modal" data-bs-target="#exampleModal"> <div class="card-body d-flex gap-1 gap-2 mb-0 p-2"> <!-- Replace src based on your actual directory and file --> <img src="/public/default.png" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:24px; max-width:26px"> <div class="d-flex flex-column col" style="width:inherit !important"> <div class="d-flex justify-content-between gap-4"> <div class="card-title text-truncate fs-6 fw-bold"> <!-- Username --> Juan Dela Cruz </div> <div class="text-end fs-6 fw-bold"> <!-- Latest comment date & time --> 08 Aug 2024 01:06 PM </div> </div> <p class="card-text text-truncate fs-6 fw-bold" style="width:300px !important"> <!-- Cemment content here --> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p> </div> </div> </div> </td> </tr> </tbody> </table> <!-- Code Preview --> <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="nav-link active" id="pills-c-html-tab" data-bs-toggle="pill" data-bs-target="#pills-c-html" type="button" role="tab" aria-controls="pills-c-html" aria-selected="true">HTML</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="pills-c-react-tab" data-bs-toggle="pill" data-bs-target="#pills-c-react" type="button" role="tab" aria-controls="pills-c-react" aria-selected="false">React</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="pills-c-vue-tab" data-bs-toggle="pill" data-bs-target="#pills-c-vue" type="button" role="tab" aria-controls="pills-c-vue" aria-selected="false">Vue</button> </li> <li class="nav-item ms-auto"> <button class="btn btn-outline-dark" onclick="copyToClipboard(this, 'pills-c-tabContent')">Copy</button> </li> </ul> </div> <div class="card-body p-0"> <div class="tab-content" id="pills-c-tabContent"> <div class="tab-pane fade active show" id="pills-c-html" role="tabpanel" aria-labelledby="pills-c-html-tab"> <pre class="mt-0"><code class="language-html"> <div class="card bg-light rounded-4" style="cursor:pointer" data-bs-toggle="modal" data-bs-target="#exampleModal"> <div class="card-body d-flex gap-1 gap-2 mb-0 p-2"> <img src="/public/default.png" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:24px; max-width:26px"> <div class="d-flex flex-column col" style="width:inherit !important"> <div class="d-flex justify-content-between gap-4"> <div class="card-title text-truncate fs-6 fw-bold"> Juan Dela Cruz </div> <div class="text-end fs-6 fw-bold"> 08 Aug 2024 01:06 PM </div> </div> <p class="card-text text-truncate fs-6 fw-bold" style="width:300px !important"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p> </div> </div> </div> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="exampleModalLabel">Comments</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div class="card bg-body-secondary rounded-4" style="cursor:pointer"> <div class="card-body d-flex gap-1 gap-2 mb-0 p-2"> <!-- Replace src based on your actual directory and file --> <img src="/public/default.png" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:45px; max-width:48px"> <div class="d-flex flex-column col" style="width:inherit !important"> <div class="d-flex justify-content-between gap-4"> <div class="card-title text-truncate fs-6"> <!-- Username --> Juan Dela Cruz <span class="badge rounded-pill text-bg-secondary">Administrator</span> </div> <div class="text-end fs-6"> <!-- Latest comment date & time --> 08 Aug 2024 01:06 PM </div> </div> <p class="card-text fs-6"> <!-- Cemment content here --> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p> </div> </div> <div class="card-footer d-flex justify-content-between"> <div class="ms-5"> <a class="btn btn-sm btn-light mb-0 rounded-pill border border-secondary text-truncate shadow-none px-3"><i class="fas fa-file-pdf text-danger me-1"></i>sample.pdf</a> </div> <div class="d-flex"> <a href="#" class="btn"><i class="fas fa-reply text-dark"></i></a> <a href="#" class="btn"><i class="fas fa-comments text-dark me-1"></i>0</a> </div> </div> </div> <!-- Comment with reply --> <div class="card bg-body-secondary rounded-4 mt-3 " style="cursor:pointer"> <div class="card-body d-flex gap-1 gap-2 mb-0 p-2"> <!-- Replace src based on your actual directory and file --> <img src="/public/default.png" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:45px; max-width:48px"> <div class="d-flex flex-column col" style="width:inherit !important"> <div class="d-flex justify-content-between gap-4"> <div class="card-title text-truncate fs-6"> <!-- Username --> Maria Delos Reyes <span class="badge rounded-pill text-bg-secondary">Proponent</span> </div> <div class="text-end fs-6"> <!-- Latest comment date & time --> 08 Aug 2024 01:06 PM </div> </div> <p class="card-text fs-6"> <!-- Cemment content here --> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p> </div> </div> <div class="card-footer d-flex justify-content-between"> <div class="ms-5"> <a class="btn btn-sm btn-light mb-0 rounded-pill border border-secondary text-truncate shadow-none px-3"><i class="fas fa-file-image text-danger me-1"></i>sample.jpg</a> </div> <div class="d-flex"> <a href="#" class="btn"><i class="fas fa-reply text-dark"></i></a> <a href="#" class="btn"><i class="fas fa-comments text-dark me-1"></i>1</a> </div> </div> </div> <!-- Replies --> <div class="row"> <div class="col"></div> <div class="col-10 border border-3 border-top-0 border-end-0 border-bottom-0 ps-5"> <div class="card bg-body-secondary rounded-4 mt-3" style="cursor:pointer"> <div class="card-body d-flex gap-1 gap-2 mb-0 p-2"> <!-- Replace src based on your actual directory and file --> <img src="/public/default.png" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:45px; max-width:48px"> <div class="d-flex flex-column col" style="width:inherit !important"> <div class="d-flex justify-content-between gap-4"> <div class="card-title text-truncate fs-6"> <!-- Username --> Maria Delos Reyes <span class="badge rounded-pill text-bg-secondary">Proponent</span> </div> <div class="text-end fs-6"> <!-- Latest comment date & time --> 08 Aug 2024 01:06 PM </div> </div> <p class="card-text fs-6"> <!-- Cemment content here --> Lorem ipsum dolor sit amet, consectetur adipiscing elit, </p> </div> </div> <div class="card-footer d-flex justify-content-between"> <div class="ms-5"> <a class="btn btn-sm btn-light mb-0 rounded-pill border border-secondary text-truncate shadow-none px-3"><i class="fas fa-file-image text-danger me-1"></i>sample.jpg</a> </div> <div class="d-flex"> <a href="#" class="btn"><i class="fas fa-pen"></i></a> <a href="#" class="btn"><i class="far fa-trash-alt text-danger"></i></a> </div> </div> </div> <!-- Send Reply Thread --> <div class="card border-0 rounded-4 mt-2" style="cursor:pointer"> <div class="card-body d-flex gap-1 gap-2 mb-0 p-2"> <!-- Replace src based on your actual directory and file --> <img src="/public/default.png" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:45px; max-width:48px"> <div class="border border-dark rounded-4 w-100 p-2"> <textarea class="comment-textarea w-100" placeholder="Reply to this thread..." style="border:0; resize: none; outline:none"></textarea> <div class="d-flex justify-content-between"> <div class="d-flex justify-content-between align-items-center border border-dark rounded border border-secondary text-bg-light"> <p class="p-1 mb-0 text-dark px-2 text-truncate">File.pdf</p> <button type="button" class="btn text-danger font-weight-bold"><i class="far fa-window-close"></i></button> </div> <div class="d-flex"> <a href="#" class="btn"><i class="fas fa-paperclip"></i></a> <a href="#" class="btn"><i class="fas fa-paper-plane text-info"></i></a> </div> </div> </div> </div> </div> </div> </div> <!-- Send Comment Thread --> <div class="card border-0 rounded-4 mt-2" style="cursor:pointer"> <div class="card-body d-flex gap-1 gap-2 mb-0 p-2"> <!-- Replace src based on your actual directory and file --> <img src="/public/default.png" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:45px; max-width:48px"> <div class="border border-dark rounded-4 w-100 p-2"> <textarea class="comment-textarea w-100" placeholder="Write a new comment..." style="border:0; resize: none; outline:none"></textarea> <div class="d-flex justify-content-between"> <div class="d-flex justify-content-between align-items-center border border-dark rounded border border-secondary text-bg-light"> <p class="p-1 mb-0 text-dark px-2 text-truncate">File.pdf</p> <button type="button" class="btn text-danger font-weight-bold"><i class="far fa-window-close"></i></button> </div> <div class="d-flex"> <a href="#" class="btn"><i class="fas fa-paperclip"></i></a> <a href="#" class="btn"><i class="fas fa-paper-plane text-info"></i></a> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> </code></pre> </div> <div class="tab-pane fade" id="pills-c-react" role="tabpanel" aria-labelledby="pills-c-react-tab"> <pre class="mt-0"><code class="language-html"> import React, { useState } from 'react'; const CommentsComponent = () => { const [showModal, setShowModal] = useState(false); return ( <div> <!-- Card with user info --> <div className="card bg-light rounded-4" style={{ cursor: 'pointer' }} onClick={() => setShowModal(true)}> <div className="card-body d-flex gap-1 gap-2 mb-0 p-2"> <img src="/public/default.png" alt="..." className="rounded-circle" style={{ maxHeight: '24px', maxWidth: '26px' }} /> <div className="d-flex flex-column col" style={{ width: 'inherit' }}> <div className="d-flex justify-content-between gap-4"> <div className="card-title text-truncate fs-6 fw-bold">Juan Dela Cruz</div> <div className="text-end fs-6 fw-bold">08 Aug 2024 01:06 PM</div> </div> <p className="card-text text-truncate fs-6 fw-bold" style={{ width: '300px' }}> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> </div> </div> <!-- Modal --> {showModal && ( <div className="modal fade show d-block" style={{ background: 'rgba(0, 0, 0, 0.5)' }}> <div className="modal-dialog modal-lg modal-dialog-centered"> <div className="modal-content"> <div className="modal-header"> <h1 className="modal-title fs-5" id="exampleModalLabel">Comments</h1> <button type="button" className="btn-close" onClick={() => setShowModal(false)} aria-label="Close"></button> </div> <div className="modal-body"> <!-- Comment Card --> <div className="card bg-body-secondary rounded-4" style={{ cursor: 'pointer' }}> <div className="card-body d-flex gap-1 gap-2 mb-0 p-2"> <img src="/public/default.png" alt="..." className="rounded-circle" style={{ maxHeight: '45px', maxWidth: '48px' }} /> <div className="d-flex flex-column col"> <div className="d-flex justify-content-between gap-4"> <div className="card-title text-truncate fs-6">Juan Dela Cruz <span className="badge rounded-pill text-bg-secondary">Administrator</span></div> <div className="text-end fs-6">08 Aug 2024 01:06 PM</div> </div> <p className="card-text fs-6"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> </div> <div className="card-footer d-flex justify-content-between"> <div className="ms-5"> <a className="btn btn-sm btn-light mb-0 rounded-pill border border-secondary text-truncate shadow-none px-3"><i className="fas fa-file-pdf text-danger me-1"></i>sample.pdf</a> </div> <div className="d-flex"> <a href="#" className="btn"><i className="fas fa-reply text-dark"></i></a> <a href="#" className="btn"><i className="fas fa-comments text-dark me-1"></i>0</a> </div> </div> </div> <!-- Reply Card --> <div className="card bg-body-secondary rounded-4 mt-3" style={{ cursor: 'pointer' }}> <div className="card-body d-flex gap-1 gap-2 mb-0 p-2"> <img src="/public/default.png" alt="..." className="rounded-circle" style={{ maxHeight: '45px', maxWidth: '48px' }} /> <div className="d-flex flex-column col"> <div className="d-flex justify-content-between gap-4"> <div className="card-title text-truncate fs-6">Maria Delos Reyes <span className="badge rounded-pill text-bg-secondary">Proponent</span></div> <div className="text-end fs-6">08 Aug 2024 01:06 PM</div> </div> <p className="card-text fs-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div className="card-footer d-flex justify-content-between"> <div className="ms-5"> <a className="btn btn-sm btn-light mb-0 rounded-pill border border-secondary text-truncate shadow-none px-3"><i className="fas fa-file-image text-danger me-1"></i>sample.jpg</a> </div> <div className="d-flex"> <a href="#" className="btn"><i className="fas fa-reply text-dark"></i></a> <a href="#" className="btn"><i className="fas fa-comments text-dark me-1"></i>1</a> </div> </div> </div> <!-- Send Comment Thread --> <div className="card border-0 rounded-4 mt-2"> <div className="card-body d-flex gap-1 gap-2 mb-0 p-2"> <img src="/public/default.png" alt="..." className="rounded-circle" style={{ maxHeight: '45px', maxWidth: '48px' }} /> <div className="border border-dark rounded-4 w-100 p-2"> <textarea className="comment-textarea w-100" placeholder="Write a new comment..." style={{ border: '0', resize: 'none', outline: 'none' }}></textarea> <div className="d-flex justify-content-between"> <div className="d-flex justify-content-between align-items-center border border-dark rounded px-2"> <p className="p-1 mb-0 text-dark text-truncate">File.pdf</p> <button type="button" className="btn text-danger"><i className="far fa-window-close"></i></button> </div> <div className="d-flex"> <a href="#" className="btn"><i className="fas fa-paperclip"></i></a> <a href="#" className="btn"><i className="fas fa-paper-plane text-info"></i></a> </div> </div> </div> </div> </div> </div> <div className="modal-footer"> <button type="button" className="btn btn-secondary" onClick={() => setShowModal(false)}>Close</button> </div> </div> </div> </div> )} </div> ); }; export default CommentsComponent; </code></pre> </div> <div class="tab-pane fade" id="pills-c-vue" role="tabpanel" aria-labelledby="pills-c-vue-tab"> <pre class="mt-0"><code class="language-html"> <template> <div> <!-- Card Component --> <div class="card bg-light rounded-4" style="cursor:pointer" @click="openModal"> <div class="card-body d-flex gap-1 gap-2 mb-0 p-2"> <img :src="profileImage" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:24px; max-width:26px" /> <div class="d-flex flex-column col" style="width:inherit !important"> <div class="d-flex justify-content-between gap-4"> <div class="card-title text-truncate fs-6 fw-bold"> {{ username }} </div> <div class="text-end fs-6 fw-bold"> {{ commentDate }} </div> </div> <p class="card-text text-truncate fs-6 fw-bold" style="width:300px !important"> {{ commentText }} </p> </div> </div> </div> <!-- Modal --> <div v-if="isModalOpen" class="modal fade show d-block" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="exampleModalLabel">Comments</h1> <button type="button" class="btn-close" @click="closeModal" aria-label="Close"></button> </div> <div class="modal-body"> <!-- Comment Card --> <div class="card bg-body-secondary rounded-4" style="cursor:pointer"> <div class="card-body d-flex gap-1 gap-2 mb-0 p-2"> <img :src="profileImage" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:45px; max-width:48px" /> <div class="d-flex flex-column col" style="width:inherit !important"> <div class="d-flex justify-content-between gap-4"> <div class="card-title text-truncate fs-6"> {{ username }} <span class="badge rounded-pill text-bg-secondary">Administrator</span> </div> <div class="text-end fs-6"> {{ commentDate }} </div> </div> <p class="card-text fs-6"> {{ commentText }} </p> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" @click="closeModal">Close</button> </div> </div> </div> </div> </div> </template> <script> export default { data() { return { isModalOpen: false, username: "Juan Dela Cruz", commentDate: "08 Aug 2024 01:06 PM", commentText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...", profileImage: "/public/default.png", }; }, methods: { openModal() { this.isModalOpen = true; }, closeModal() { this.isModalOpen = false; }, }, }; </script> <style scoped> .modal.show { display: block; background-color: rgba(0, 0, 0, 0.5); } </style> </code></pre> </div> </div> </div> </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>
<!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="exampleModalLabel">Comments</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div class="card bg-body-secondary rounded-4" style="cursor:pointer"> <div class="card-body d-flex gap-1 gap-2 mb-0 p-2"> <!-- Replace src based on your actual directory and file --> <img src="/public/default.png" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:45px; max-width:48px"> <div class="d-flex flex-column col" style="width:inherit !important"> <div class="d-flex justify-content-between gap-4"> <div class="card-title text-truncate fs-6"> <!-- Username --> Juan Dela Cruz <span class="badge rounded-pill text-bg-secondary">Administrator</span> </div> <div class="text-end fs-6"> <!-- Latest comment date & time --> 08 Aug 2024 01:06 PM </div> </div> <p class="card-text fs-6"> <!-- Cemment content here --> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p> </div> </div> <div class="card-footer d-flex justify-content-between"> <div class="ms-5"> <a class="btn btn-sm btn-light mb-0 rounded-pill border border-secondary text-truncate shadow-none px-3"><i class="fas fa-file-pdf text-danger me-1"></i>sample.pdf</a> </div> <div class="d-flex"> <a href="#" class="btn"><i class="fas fa-reply text-dark"></i></a> <a href="#" class="btn"><i class="fas fa-comments text-dark me-1"></i>0</a> </div> </div> </div> <!-- Comment with reply --> <div class="card bg-body-secondary rounded-4 mt-3 " style="cursor:pointer"> <div class="card-body d-flex gap-1 gap-2 mb-0 p-2"> <!-- Replace src based on your actual directory and file --> <img src="/public/default.png" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:45px; max-width:48px"> <div class="d-flex flex-column col" style="width:inherit !important"> <div class="d-flex justify-content-between gap-4"> <div class="card-title text-truncate fs-6"> <!-- Username --> Maria Delos Reyes <span class="badge rounded-pill text-bg-secondary">Proponent</span> </div> <div class="text-end fs-6"> <!-- Latest comment date & time --> 08 Aug 2024 01:06 PM </div> </div> <p class="card-text fs-6"> <!-- Cemment content here --> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p> </div> </div> <div class="card-footer d-flex justify-content-between"> <div class="ms-5"> <a class="btn btn-sm btn-light mb-0 rounded-pill border border-secondary text-truncate shadow-none px-3"><i class="fas fa-file-image text-danger me-1"></i>sample.jpg</a> </div> <div class="d-flex"> <a href="#" class="btn"><i class="fas fa-reply text-dark"></i></a> <a href="#" class="btn"><i class="fas fa-comments text-dark me-1"></i>1</a> </div> </div> </div> <!-- Replies --> <div class="row"> <div class="col"></div> <div class="col-10 border border-3 border-top-0 border-end-0 border-bottom-0 ps-5"> <div class="card bg-body-secondary rounded-4 mt-3" style="cursor:pointer"> <div class="card-body d-flex gap-1 gap-2 mb-0 p-2"> <!-- Replace src based on your actual directory and file --> <img src="/public/default.png" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:45px; max-width:48px"> <div class="d-flex flex-column col" style="width:inherit !important"> <div class="d-flex justify-content-between gap-4"> <div class="card-title text-truncate fs-6"> <!-- Username --> Maria Delos Reyes <span class="badge rounded-pill text-bg-secondary">Proponent</span> </div> <div class="text-end fs-6"> <!-- Latest comment date & time --> 08 Aug 2024 01:06 PM </div> </div> <p class="card-text fs-6"> <!-- Cemment content here --> Lorem ipsum dolor sit amet, consectetur adipiscing elit, </p> </div> </div> <div class="card-footer d-flex justify-content-between"> <div class="ms-5"> <a class="btn btn-sm btn-light mb-0 rounded-pill border border-secondary text-truncate shadow-none px-3"><i class="fas fa-file-image text-danger me-1"></i>sample.jpg</a> </div> <div class="d-flex"> <a href="#" class="btn"><i class="fas fa-pen"></i></a> <a href="#" class="btn"><i class="far fa-trash-alt text-danger"></i></a> </div> </div> </div> <!-- Send Reply Thread --> <div class="card border-0 rounded-4 mt-2" style="cursor:pointer"> <div class="card-body d-flex gap-1 gap-2 mb-0 p-2"> <!-- Replace src based on your actual directory and file --> <img src="/public/default.png" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:45px; max-width:48px"> <div class="border border-dark rounded-4 w-100 p-2"> <textarea class="comment-textarea w-100" placeholder="Reply to this thread..." style="border:0; resize: none; outline:none"></textarea> <div class="d-flex justify-content-between"> <div class="d-flex justify-content-between align-items-center border border-dark rounded border border-secondary text-bg-light"> <p class="p-1 mb-0 text-dark px-2 text-truncate">File.pdf</p> <button type="button" class="btn text-danger font-weight-bold"><i class="far fa-window-close"></i></button> </div> <div class="d-flex"> <a href="#" class="btn"><i class=" fas fa-paperclip"></i></a> <a href="#" class="btn"><i class=" fas fa-paper-plane text-info"></i></a> </div> </div> </div> </div> </div> </div> </div> <!-- Send Comment Thread --> <div class="card border-0 rounded-4 mt-2" style="cursor:pointer"> <div class="card-body d-flex gap-1 gap-2 mb-0 p-2"> <!-- Replace src based on your actual directory and file --> <img src="/public/default.png" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:45px; max-width:48px"> <div class="border border-dark rounded-4 w-100 p-2"> <textarea class="comment-textarea w-100" placeholder="Write a new comment..." style="border:0; resize: none; outline:none"></textarea> <div class="d-flex justify-content-between"> <div class="d-flex justify-content-between align-items-center border border-dark rounded border border-secondary text-bg-light"> <p class="p-1 mb-0 text-dark px-2 text-truncate">File.pdf</p> <button type="button" class="btn text-danger font-weight-bold"><i class="far fa-window-close"></i></button> </div> <div class="d-flex"> <a href="#" class="btn"><i class=" fas fa-paperclip"></i></a> <a href="#" class="btn"><i class=" fas fa-paper-plane text-info"></i></a> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> </div> </div> </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) const parentDiv = document.getElementById(tabPaneId); const activeTabPane = parentDiv.querySelector('.tab-pane.fade.active.show'); console.log("🚀 ~ copyToClipboard ~ activeTabPane:", activeTabPane.id) const codeElement = activeTabPane.querySelector('pre code'); const codeText = codeElement.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>
|
