tring to fix styles problems

2025-10-02 20:47:38 -06:00
parent 70dc03d6d6
commit f07954eef2
24 changed files with 362 additions and 58 deletions
@@ -0,0 +1,70 @@
+.tableContainer {
+    overflow-y: auto;
+    overflow-x: auto;
+    border-radius: 4px;
+    border: 1px solid #cfcfcf;
+    max-height: 430px;
+    scrollbar-color: rgb(1, 92, 184) rgba(0, 0, 0, 0);
+    background-color: #f9f9f9;
+    width: 100%;
+}
+
+.machineTable {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: auto;
+}
+
+.machineTable th,
+.machineTable td {
+    padding: 10px;
+    text-align: center;
+    border-bottom: 1px solid #cfcfcf;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+}
+
+.machineTable th {
+    position: sticky;
+    top: 0px;
+    background-color: rgb(1, 92, 184);
+    color: white;
+}
+
+.machineTable tr {
+    min-width: 400px;
+}
+
+.disponible {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    background-color: green;
+    color: green;
+    font-weight: bold;
+}
+
+.ocupado {
+    color: red;
+    font-weight: bold;
+}
+
+
+.actions {
+    text-align: center;
+}
+
+.resetButton {
+    padding: 8px 16px;
+    background-color: #ff4d4d;
+    color: white;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-weight: bold;
+    transition: 0.3s;
+}
+
+.resetButton:hover {
+    background-color: #cc0000;
+}
@@ -74,7 +74,7 @@ export default function Equipos() {
            <option value="4">mmmmm</option>
            <option value="5">mmmmm</option>
          </select>
-          <div className="containerButton">
+          <div className="containerButton" style={{marginTop:"1rem"}}>
            <button className="button buttonSearch">Nuevo</button>
            <button className="button buttonSearch">Editar</button>
          </div>
@@ -0,0 +1,63 @@
+import styles from "./Page.module.css";
+
+export default async function TableEquipos() {
+  return (
+    <section className="containerSection">
+
+      <div className={styles.tableContainer}>
+        <table className={styles.machineTable}>
+          <thead>
+            <tr style={{fontSize:"15px"}}>
+              <th>Ubicación</th>
+              <th>Nombre</th>
+              <th>Plataforma</th>
+              <th>Área</th>
+              <th>Activo</th>
+            </tr>
+            <tr>
+              <th>
+                <select style={{ minWidth: "50px" }}>
+                  <option style={{ minWidth: "50px" }}>pcnet1</option>
+                </select>
+              </th>
+              <th>
+                <select style={{ minWidth: "50px" }}>
+                  <option style={{ minWidth: "50px" }}>mostrar todos</option>
+                </select>
+              </th>
+              <th>
+                <select style={{ minWidth: "50px" }}>
+                  <option style={{ minWidth: "50px" }}>windows</option>
+                </select>
+              </th>
+              <th>
+                <select style={{ minWidth: "50px" }}>
+                  <option style={{ minWidth: "50px" }}>mostrar Todo</option>
+                </select>
+              </th>
+              <th>
+                <select style={{ minWidth: "50px" }}>
+                  <option style={{ minWidth: "50px" }}>si</option>
+                </select>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {/* {machines.map((machine, index) => (
+              <tr key={index}>
+                <td>{machine.ubicacion}</td>
+                <td>{machine.nombre}</td>
+                <td>{machine.plataforma}</td>
+                <td>{machine.area}</td>
+                <td className={machine.disponible ? "disponible" : ""}>
+                  {machine.disponible ? "si" : "no"}
+                </td>
+              </tr>
+            ))} */}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  );
+}
+//IO