feat: building a paignation component

Author: zangeronimo

starter/06-Components/Table/index.html

@@ -51,5 +51,48 @@
         </tr>
       </tbody>
     </table>
+
+    <div class="pagination">
+      <button class="btn btn-previous">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="btn-icon"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M15.75 19.5L8.25 12l7.5-7.5"
+          />
+        </svg>
+      </button>
+      <button class="btn">1</button>
+      <button class="btn">2</button>
+      <button class="btn btn-active">3</button>
+      <button class="btn">4</button>
+      <button class="btn">5</button>
+      <button class="btn">6</button>
+      <span class="dots">...</span>
+      <button class="btn">23</button>
+      <button class="btn btn-next">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="btn-icon"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M8.25 4.5l7.5 7.5-7.5 7.5"
+          />
+        </svg>
+      </button>
+    </div>
   </body>
 </html>

starter/06-Components/Table/style.css

@@ -28,7 +28,8 @@ body {
 
 table {
   width: 800px;
-  margin: 100px auto;
+  margin: 0 auto;
+  margin-top: 100px;
   border-collapse: collapse;
   font-size: 18px;
 }
@@ -56,3 +57,55 @@ tbody tr:nth-child(odd) {
 tbody tr:nth-child(even) {
   background-color: #e9ecef;
 }
+
+/* PAGINATION STYLES */
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.btn {
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 50%;
+  background: none;
+  color: #343a40;
+  font-weight: 500;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.btn-previous,
+.btn-next {
+  color: #087f5b;
+  border: 1px solid #087f5b;
+  width: 48px;
+  height: 48px;
+}
+
+.btn-icon {
+  width: 24px;
+  height: 24px;
+  stroke: currentColor;
+}
+
+.btn-active {
+  cursor: default;
+}
+
+.btn-active,
+.btn:hover {
+  background-color: #087f5b;
+  color: #fff;
+}
+
+.dots {
+  color: #868e96;
+}