initial commit

frontend/src/App.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+import Counter from "./Counter";
+import ServiceStatus from "./ServiceStatus";
+
+export default function App() {
+  return (
+    <div className="flex flex-wrap gap-x-[15vw] gap-y-[8vw] place-content-center">
+        <ServiceStatus label="Compteur 1" />
+        <ServiceStatus label="Compteur 1" />
+        <ServiceStatus label="Compteur 1" />
+        <ServiceStatus label="Compteur 1" />
+        <ServiceStatus label="Compteur 1" />
+        <ServiceStatus label="Compteur 1" />
+        <ServiceStatus label="Compteur 1" />
+        <ServiceStatus label="Compteur 1" />
+        <ServiceStatus label="Compteur 1" />
+        <ServiceStatus label="Compteur 1" />
+        <ServiceStatus label="Compteur 1" />
+        <ServiceStatus label="Compteur 1" />
+        <ServiceStatus label="Compteur 1" />
+        <ServiceStatus label="Compteur 1" />
+    </div>
+  );
+}

frontend/src/Counter.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+
+export default function App() {
+  // ✅ React + TypeScript : state typé
+  const [count, setCount] = useState<number>(0);
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
+      {/* ✅ TailwindCSS : stylisation */}
+      <h1 className="text-3xl font-bold mb-6 text-blue-700">
+        Counter Example
+      </h1>
+
+      <p className="text-xl mb-4">
+        Current count: <span className="font-mono">{count}</span>
+      </p>
+
+      <div className="space-x-4">
+        {/* ✅ React : gestion d'événements */}
+        <button
+          className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition"
+          onClick={() => setCount(count + 1)}
+        >
+          Increment
+        </button>
+
+        <button
+          className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition"
+          onClick={() => setCount(0)}
+        >
+          Reset
+        </button>
+      </div>
+    </div>
+  );
+}

frontend/src/ServiceStatus.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+
+export default function App() {
+    return (
+        <div className="grid grid-cols-1 gap-0">
+            <div className="..."> Service Name </div>
+            <div className="flex flex-row gap-1">
+                <div className="w-1 flex-1 bg-indigo-500 p-1"></div>
+                <div className="w-1 flex-1 bg-indigo-500 p-1"></div>
+                <div className="w-1 flex-1 bg-indigo-500 p-1"></div>
+                <div className="w-1 flex-1 bg-indigo-500 p-1"></div>
+                <div className="w-1 flex-1 bg-indigo-500 p-1"></div>
+                <div className="w-1 flex-1 bg-indigo-500 p-1"></div>
+                <div className="w-1 flex-1 bg-indigo-500 p-1"></div>
+                <div className="w-1 flex-1 bg-indigo-500 p-1"></div>
+                <div className="w-1 flex-1 bg-indigo-500 p-1"></div>
+                <div className="w-1 flex-1 bg-indigo-500 p-1"></div>
+                <div className="w-1 flex-1 bg-indigo-500 p-1"></div>
+                <div className="w-1 flex-1 bg-indigo-500 p-1"></div>
+                <div className="w-1 flex-1 bg-indigo-500 p-1"></div>
+                <div className="w-1 flex-1 bg-indigo-500 p-1"></div>
+                <div className="w-1 flex-1 bg-indigo-500 p-1"></div>
+                <div className="w-1 flex-1 bg-indigo-500 p-1"></div>
+            </div>
+        </div>
+    );
+}

frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "../index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App/>
+  </React.StrictMode>
+);