More zones

src/App.css

@@ -11,14 +11,16 @@ body {
   }
   
   .container {
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(6, 1fr); /* 4 zones in the top row */
+    grid-template-rows: auto auto; /* Two rows */
     gap: 20px;
     padding: 20px;
-    justify-content: center;
+    justify-items: center;
   }
   
   .dropzone {
-    width: 300px;
+    width: 200px;
     padding: 20px;
     border: 2px dashed #aaa;
     background-color: #ffffff;
@@ -36,7 +38,7 @@ body {
   }
 
   .dropzone.runway {
-    width: 300px;
+    width: 200px;
     height: 150px;
     background-color: #ffebee; /* Light red */
   }
@@ -49,7 +51,20 @@ body {
     background-color: #fff3e0; /* Light orange */
   }
 
+  .dropzone.ppr {
+    background-color: #fff3e0; /* Light orange */
+  }
+
+  .dropzone.inbound {
+    /* grid-column: 1 / 2; /* Place in the first column of the bottom row */
+    background-color: #ede7f6; /* Light purple */
+  }
+
   .card {
+    display: flex;
+    flex-direction: column; /* Stack items vertically */
+    justify-content: space-between;
+    align-items: flex-start; /* Align items to the left */
     padding: 15px;
     margin: 10px 0;
     background-color: #ffffff;
@@ -60,7 +75,35 @@ body {
     transition: transform 0.2s ease, box-shadow 0.2s ease;
   }
 
+  .card-header {
+    display: flex;
+    justify-content: space-between; /* Align registration left and type right */
+    width: 100%;
+    font-size: 1.2em; /* Make the registration larger */
+    font-weight: bold; /* Optional: make the registration bold */
+  }
+
+  .card-type {
+    align-self: flex-end; /* Align type to the right on the bottom row */
+    font-size: 0.9em; /* Optional: slightly smaller font for type */
+    color: #666; /* Optional: subtle color for type */
+  }
+  
+  .card-bottom {
+    display: flex;
+    justify-content: space-between; /* Align POB to the left and type to the right */
+    width: 100%;
+  }
+  
   .card:active {
     transform: scale(1.02);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   }
+
+  .card-note {
+    text-align: center; /* Center the note text */
+    margin: 10px 0; /* Add spacing around the note */
+    font-style: italic; /* Optional: make the note italic for emphasis */
+    color: #555; /* Optional: subtle color for the note */
+    width: 100%; /* Ensure the note spans the full width of the card */
+  }

src/App.js

@@ -4,14 +4,16 @@ import "./App.css";
 const App = () => {
   const [zones, setZones] = useState({
     awaitingDepart: [
-      { id: "1", registration: "G-ARYK", type: "C172", pob: 1 },
-      { id: "2", registration: "G-BIBT", type: "AA5", pob: 2 },
-      { id: "3", registration: "G-BAMC", type: "C150", pob: 2 },
-      { id: "4", registration: "G-GOHI", type: "C208", pob: 12 },
+      { id: "1", registration: "G-ARYK", type: "C172", pob: 1, note: "SLEAP" },
+      { id: "2", registration: "G-BIBT", type: "AA5", pob: 2, note: "EGBP" },
+      { id: "3", registration: "G-BAMC", type: "C152", pob: 2, note: "LCL" },
+      { id: "4", registration: "G-GOHI", type: "C208", pob: 12, note: "Here" },
     ],
     runway: [],
     local: [],
     circuit: [],
+    inbound: [],
+    ppr: [],
   });
 
   const handleDragStart = (e, card, sourceZone) => {
@@ -62,16 +64,20 @@ const App = () => {
         draggable
         onDragStart={(e) => handleDragStart(e, card, sourceZone)}
       >
-        {card.registration}
-        <br />
-        Type: {card.type}
-        <br />
-        {card.pob} POB
+        <div className="card-header">
+          <span>{card.registration}</span>
+        </div>
+        <div className="card-note">{card.note}</div>
+        <div className="card-bottom">
+          <span>{card.pob} POB</span>
+          <span>{card.type}</span>
+        </div>
       </div>
     ));
 
   return (
     <div className="container">
+      {/* Top row */}
       <div
         className="dropzone awaitingDepart"
         onDragOver={handleDragOver}
@@ -104,6 +110,22 @@ const App = () => {
         <h3>Circuit</h3>
         {renderCards(zones.circuit, "circuit")}
       </div>
+      <div
+        className="dropzone inbound"
+        onDragOver={handleDragOver}
+        onDrop={(e) => handleDrop(e, "inbound")}
+      >
+        <h3>Inbound</h3>
+        {renderCards(zones.inbound, "inbound")}
+      </div>
+      <div
+        className="dropzone ppr"
+        onDragOver={handleDragOver}
+        onDrop={(e) => handleDrop(e, "ppr")}
+      >
+        <h3>PPRs</h3>
+        {renderCards(zones.ppr, "ppr")}
+      </div>
     </div>
   );
 };