From b02944381d11e29048ef52fdbd1ded775dee1092 Mon Sep 17 00:00:00 2001
From: Gerard Balde <gpdbalde@dost.gov.ph>
Date: Wed, 11 Sep 2024 14:08:39 +0800
Subject: [PATCH] Updated no comment code preview

---
 index.html | 209 +++++++++++++++++++++++++++--------------------------
 1 file changed, 105 insertions(+), 104 deletions(-)

diff --git a/index.html b/index.html
index 954b4f1..0470cf3 100644
--- a/index.html
+++ b/index.html
@@ -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');