Merge pull request #414 from Bhum-ika/fixSchedulePage

Fixed Schedule Page
dhairyagothi · Oct 23, 2024 · 0d5d3da · 0d5d3da
2 parents 494c865 + 1938fd2
commit 0d5d3da
Showing 1 changed file with 45 additions and 39 deletions.
diff --git a/frontend/src/Pages/schedule.jsx b/frontend/src/Pages/schedule.jsx
@@ -28,8 +28,8 @@ const SchedulePage = () => {
         }}
       />
 
-      <div className="relative w-full px-4 py-8 z-10">
-        <div className="w-full max-w-md mx-auto flex items-center mb-6">
+      <div className="relative w-full  px-4 py-8 z-10 flex items-center justify-center  flex-col">
+        <div className="w-full max-w-md mx-auto flex items-center mb-6 ">
           <button
             onClick={() => navigate(-1)}
             className="flex items-center text-white hover:text-blue-200 transition-colors"
@@ -39,49 +39,55 @@ const SchedulePage = () => {
           </button>
         </div>
 
-        <div className="w-full max-w-md mx-auto bg-white bg-opacity-90 rounded-lg shadow-md p-6 backdrop-blur-sm">
+        <div className="w-9/12  bg-white bg-opacity-90 rounded-lg shadow-md p-6 backdrop-blur-sm">
           <h2 className="text-xl font-bold text-center mb-6 py-2 bg-blue-100 border border-blue-300 rounded-3xl shadow-sm">
             Train Schedule
           </h2>
 
           <div className="space-y-4">
-            <div className="mb-4">
-              <label className="block text-gray-700 font-semibold mb-2">Search</label>
-              <div className="relative">
-                <input
-                  type="text"
-                  placeholder="Search..."
-                  className="w-full px-4 py-2 pr-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
-                />
-                <IoSearchOutline className="absolute right-3 top-2.5 text-gray-400" size={20} />
-              </div>
-            </div>
-
-            <div>
-              <label className="block text-gray-700 font-semibold mb-2">Train Number</label>
-              <div className="relative">
-                <input
-                  type="text"
-                  value={trainNumber}
-                  onChange={(e) => setTrainNumber(e.target.value)}
-                  className="w-full px-4 py-2 pr-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
-                />
-                <IoSearchOutline className="absolute right-3 top-2.5 text-gray-400" size={20} />
-              </div>
-            </div>
+          <div className="flex flex-wrap w-full md:gap-10">
+  {/* Search Input */}
+  <div className="w-full md:w-3/12">
+    <label className="block text-gray-700 font-semibold mb-2">Search</label>
+    <div className="relative">
+      <input
+        type="text"
+        placeholder="Search..."
+        className="w-full px-4 py-2 pr-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
+      />
+      <IoSearchOutline className="absolute right-3 top-2.5 text-gray-400" size={20} />
+    </div>
+  </div>
+
+  {/* Train Number Input */}
+  <div className="w-full md:w-1/3">
+    <label className="block text-gray-700 font-semibold mb-2">Train Number</label>
+    <div className="relative">
+      <input
+        type="text"
+        value={trainNumber}
+        onChange={(e) => setTrainNumber(e.target.value)}
+        className="w-full px-4 py-2 pr-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
+      />
+      <IoSearchOutline className="absolute right-3 top-2.5 text-gray-400" size={20} />
+    </div>
+  </div>
+
+  {/* Train Name Input */}
+  <div className="w-full md:w-1/3">
+    <label className="block text-gray-700 font-semibold mb-2">Train Name</label>
+    <div className="relative">
+      <input
+        type="text"
+        value={trainName}
+        onChange={(e) => setTrainName(e.target.value)}
+        className="w-full px-4 py-2 pr-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
+      />
+      <IoSearchOutline className="absolute right-3 top-2.5 text-gray-400" size={20} />
+    </div>
+  </div>
+</div>
 
-            <div>
-              <label className="block text-gray-700 font-semibold mb-2">Train Name</label>
-              <div className="relative">
-                <input
-                  type="text"
-                  value={trainName}
-                  onChange={(e) => setTrainName(e.target.value)}
-                  className="w-full px-4 py-2 pr-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
-                />
-                <IoSearchOutline className="absolute right-3 top-2.5 text-gray-400" size={20} />
-              </div>
-            </div>
 
             <div>
               <label className="block text-gray-700 font-semibold mb-2">Next Station</label>