Se afinaron detalles y se agregó la página de visualizacion

src/components/cargaArchivo.tsx

@@ -40,6 +40,12 @@ const CargaArchivo: React.FC = () => {
         onClick={handleUpload}
         disabled={!archivo}
         className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+        style={{
+
+          backgroundColor: "#2563eb",
+          color: "#fff",
+
+        }}
       >
         Subir archivo
       </button>

src/components/select.tsx

@@ -0,0 +1,103 @@
+import React, { useId } from 'react';
+
+interface Option {
+  value: string | number;
+  label: string;
+}
+
+interface SelectProps
+  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'className'> {
+  label: string;
+  className?: {
+    container?: string;
+    label?: string;
+    input?: string;
+  };
+  options: Option[];
+  placeholder?: string;
+}
+
+/**
+ * Componente `Select` reutilizable en React.
+ *
+ * Este componente renderiza un elemento `<select>` con una etiqueta visible,
+ * opciones personalizadas y estilos configurables por clase. Es compatible
+ * con el uso controlado (`value`) o no controlado (`defaultValue`).
+ *
+ * Además, genera automáticamente un `id` si no se proporciona, manteniendo
+ * buenas prácticas de accesibilidad.
+ *
+ * @component
+ * @example
+ * // Uso básico
+ * <Select
+ *   label="País"
+ *   name="pais"
+ *   options={[
+ *     { value: 'mx', label: 'México' },
+ *     { value: 'us', label: 'Estados Unidos' },
+ *     { value: 'ca', label: 'Canadá' }
+ *   ]}
+ *   placeholder="Selecciona un país"
+ *   defaultValue=""
+ * />
+ *
+ * @param {Object} props - Propiedades del componente.
+ * @param {string} props.label - Etiqueta visible asociada al campo.
+ * @param {Array<{ value: string | number, label: string }>} props.options - Lista de opciones disponibles en el select.
+ * @param {string} [props.placeholder] - Opción deshabilitada inicial que actúa como guía o título (si se proporciona).
+ * @param {string} [props.name] - Nombre del campo (útil en formularios).
+ * @param {string} [props.id] - ID del campo; si no se proporciona, se genera automáticamente.
+ * @param {string | number} [props.defaultValue] - Valor por defecto del select (modo no controlado).
+ * @param {string | number} [props.value] - Valor actual del select (modo controlado).
+ * @param {Object} [props.className] - Objeto para aplicar clases CSS personalizadas.
+ * @param {string} [props.className.container] - Clases del contenedor principal.
+ * @param {string} [props.className.label] - Clases de la etiqueta.
+ * @param {string} [props.className.input] - Clases del `<select>`.
+ * @param {React.SelectHTMLAttributes<HTMLSelectElement>} [rest] - Cualquier otra prop válida para `<select>`.
+ *
+ * @returns {JSX.Element} Un elemento `<select>` con sus opciones y etiqueta asociada.
+ */
+const Select: React.FC<SelectProps> = ({
+  label,
+  className,
+  options,
+  placeholder,
+  id,
+  name,
+  defaultValue,
+  value,
+  ...rest
+}) => {
+  const generatedId = useId();
+  const selectId = id || name || generatedId;
+
+  return (
+    <div className={`mb-3 ${className?.container ?? ''}`}>
+      <label htmlFor={selectId} className={`form-label ${className?.label ?? ''}`}>
+        {label}
+      </label>
+      <select
+        id={selectId}
+        name={name}
+        className={`form-select bg-white ${className?.input ?? ''}`}
+        defaultValue={defaultValue ?? (value === undefined ? '' : undefined)}
+        value={value}
+        {...rest}
+      >
+        {placeholder && (
+          <option value="" disabled>
+            {placeholder}
+          </option>
+        )}
+        {options.map((option) => (
+          <option key={option.value.toString()} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+export default Select;