Surveillance ateliers cimenterie

import React, { useState } from 'react';

const App = () => {
  const [selectedSector, setSelectedSector] = useState(null);

  const sectors = [
    { id: 'cru', name: 'Secteur Cru', subSectors: ['Broyeur Cru 1 (BC1)', 'Broyeur Cru 2 (BC2)'] },
    { id: 'cuisson', name: 'Secteur Cuisson', subSectors: ['Four 1', 'Four 2'] },
    { id: 'ciment', name: 'Secteur Ciment', subSectors: ['BK1', 'BK2', 'BK3'] }
  ];

  const handleSectorClick = (sector) => {
    setSelectedSector(sector);
  };

  return (
    <div className="min-h-screen bg-gray-100 p-8">
      <header className="bg-blue-600 text-white p-4 rounded-lg mb-8">
        <h1 className="text-3xl font-bold">Eagle Eye</h1>
      </header>

      {!selectedSector ? (
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {sectors.map((sector) => (
            <div
              key={sector.id}
              className="bg-white p-6 rounded-lg shadow-lg cursor-pointer hover:shadow-xl transition-shadow"
              onClick={() => handleSectorClick(sector)}
            >
              <h2 className="text-xl font-semibold mb-2">{sector.name}</h2>
              <p className="text-gray-600">Cliquez pour voir les sous-secteurs</p>
            </div>
          ))}
        </div>
      ) : (
        <div className="bg-white p-6 rounded-lg shadow-lg">
          <button
            className="mb-4 text-blue-600 hover:underline"
            onClick={() => setSelectedSector(null)}
          >
            &larr; Retour
          </button>
          <h2 className="text-2xl font-bold mb-4">{selectedSector.name}</h2>
          <div className="space-y-4">
            {selectedSector.subSectors.map((subSector, index) => (
              <div key={index} className="bg-gray-50 p-4 rounded-lg">
                <h3 className="text-lg font-semibold">{subSector}</h3>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default App;