From 52d8dd316a0fa620a267b0e5697eefd2dce9f837 Mon Sep 17 00:00:00 2001
From: Ayush <asharma7588@gmail.com>
Date: Wed, 9 Oct 2024 10:04:15 +0530
Subject: [PATCH] Added back button on station page

---
 frontend/src/Pages/Register.jsx |   2 +-
 frontend/src/Pages/stations.jsx | 217 ++++++++++++++++++--------------
 2 files changed, 124 insertions(+), 95 deletions(-)

diff --git a/frontend/src/Pages/Register.jsx b/frontend/src/Pages/Register.jsx
index d1f19c6..c22ca2c 100644
--- a/frontend/src/Pages/Register.jsx
+++ b/frontend/src/Pages/Register.jsx
@@ -19,7 +19,7 @@ const Register = () => {
 
     const handleRegister = (e) => {
         e.preventDefault();
-        // Handle registration logic here
+        // Handle registration logic here 
     };
 
     return (
diff --git a/frontend/src/Pages/stations.jsx b/frontend/src/Pages/stations.jsx
index dabd7cc..7536fbb 100644
--- a/frontend/src/Pages/stations.jsx
+++ b/frontend/src/Pages/stations.jsx
@@ -1,13 +1,14 @@
 // src/components/RailwayStations.jsx
 
-import React, { useState } from 'react';
-import { FaTrain } from 'react-icons/fa'; // Using FontAwesome train icon
-import { AiFillStar, AiOutlineStar } from 'react-icons/ai'; // Star icons for favorites
-
+import React, { useState } from "react";
+import { FaTrain } from "react-icons/fa"; // Using FontAwesome train icon
+import { AiFillStar, AiOutlineStar } from "react-icons/ai"; // Star icons for favorites
+import backicon from "../assets/svg/backicon.svg";
+import { useNavigate } from "react-router-dom";
 const RailwayStations = () => {
-    // Comprehensive list of railway stations
-    const stations = [
-        // A
+  // Comprehensive list of railway stations
+  const stations = [
+    // A
     "Agartala Railway Station",
     "Agra Cantonment",
     "Ahmedabad Junction",
@@ -155,103 +156,131 @@ const RailwayStations = () => {
     // Z
     "Ziyadpur Junction",
 
-        // Add more stations as needed
-    ];
-
-    const [searchTerm, setSearchTerm] = useState('');
-    const [favorites, setFavorites] = useState([]);
+    // Add more stations as needed
+  ];
 
-    // Function to toggle favorite stations
-    const toggleFavorite = (station) => {
-        if (favorites.includes(station)) {
-            setFavorites(favorites.filter((fav) => fav !== station));
-        } else {
-            setFavorites([...favorites, station]);
-        }
-    };
+  const [searchTerm, setSearchTerm] = useState("");
+  const [favorites, setFavorites] = useState([]);
+  const navigate = useNavigate();
+  
+  // Function to toggle favorite stations
+  const toggleFavorite = (station) => {
+    if (favorites.includes(station)) {
+      setFavorites(favorites.filter((fav) => fav !== station));
+    } else {
+      setFavorites([...favorites, station]);
+    }
+  };
+  const HomeClick = () => {
+    navigate("/"); // Navigates to the home page
+  };
 
-    // Filter stations based on search term
-    const filteredStations = stations.filter((station) =>
-        station.toLowerCase().includes(searchTerm.toLowerCase())
-    );
+  // Filter stations based on search term
+  const filteredStations = stations.filter((station) =>
+    station.toLowerCase().includes(searchTerm.toLowerCase())
+  );
 
-    return (
-        <div className="min-h-screen bg-gray-100 p-4">
-            {/* Header Section */}
-            <div className="flex flex-col items-center mb-8">
-                <h1 className="text-3xl font-bold text-gray-800">Railway Stations</h1>
-                <p className="text-gray-600 mt-2">Find and explore railway stations across India</p>
-            </div>
+  return (
+    <div className="min-h-screen bg-gray-100 p-4">
+      <div>
+        <button onClick={HomeClick}>
+          <img
+            src={backicon}
+            alt=""
+            srcset=""
+            className="fixed left-[1vh] h-[9vh] w-auto"
+          />
+        </button>
+      </div>
+      {/* Header Section */}
+      <div className="flex flex-col items-center mb-8">
+        <h1 className="text-3xl font-bold text-gray-800">Railway Stations</h1>
+        <p className="text-gray-600 mt-2">
+          Find and explore railway stations across India
+        </p>
+      </div>
 
-            {/* Search Bar */}
-            <div className="flex justify-center mb-6">
-                <input
-                    type="text"
-                    placeholder="Search for a railway station..."
-                    value={searchTerm}
-                    onChange={(e) => setSearchTerm(e.target.value)}
-                    className="w-full max-w-md px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
-                />
-            </div>
+      {/* Search Bar */}
+      <div className="flex justify-center mb-6">
+        <input
+          type="text"
+          placeholder="Search for a railway station..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          className="w-full max-w-md px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
+        />
+      </div>
 
-            {/* Stations Grid */}
-            <div className="flex justify-center">
-                <div className="w-full max-w-4xl grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
-                    {filteredStations.length > 0 ? (
-                        filteredStations.map((station, index) => (
-                            <div
-                                key={index}
-                                className="flex items-center justify-between p-4 bg-white rounded-lg shadow hover:shadow-lg transition duration-200"
-                            >
-                                <div className="flex items-center">
-                                    <FaTrain className="text-blue-500 w-6 h-6 mr-3" />
-                                    <span className="text-gray-800 font-medium">{station}</span>
-                                </div>
-                                <button
-                                    onClick={() => toggleFavorite(station)}
-                                    className="text-yellow-500 focus:outline-none"
-                                    aria-label={favorites.includes(station) ? "Remove from favorites" : "Add to favorites"}
-                                >
-                                    {favorites.includes(station) ? <AiFillStar className="w-5 h-5" /> : <AiOutlineStar className="w-5 h-5" />}
-                                </button>
-                            </div>
-                        ))
-                    ) : (
-                        <div className="col-span-full p-4 text-center text-gray-500">No stations found.</div>
-                    )}
+      {/* Stations Grid */}
+      <div className="flex justify-center">
+        <div className="w-full max-w-4xl grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+          {filteredStations.length > 0 ? (
+            filteredStations.map((station, index) => (
+              <div
+                key={index}
+                className="flex items-center justify-between p-4 bg-white rounded-lg shadow hover:shadow-lg transition duration-200"
+              >
+                <div className="flex items-center">
+                  <FaTrain className="text-blue-500 w-6 h-6 mr-3" />
+                  <span className="text-gray-800 font-medium">{station}</span>
                 </div>
+                <button
+                  onClick={() => toggleFavorite(station)}
+                  className="text-yellow-500 focus:outline-none"
+                  aria-label={
+                    favorites.includes(station)
+                      ? "Remove from favorites"
+                      : "Add to favorites"
+                  }
+                >
+                  {favorites.includes(station) ? (
+                    <AiFillStar className="w-5 h-5" />
+                  ) : (
+                    <AiOutlineStar className="w-5 h-5" />
+                  )}
+                </button>
+              </div>
+            ))
+          ) : (
+            <div className="col-span-full p-4 text-center text-gray-500">
+              No stations found.
             </div>
+          )}
+        </div>
+      </div>
 
-            {/* Favorites Section (Optional) */}
-            {favorites.length > 0 && (
-                <div className="mt-8">
-                    <h2 className="text-2xl font-semibold text-gray-800 mb-4">Your Favorite Stations</h2>
-                    <div className="flex justify-center">
-                        <div className="w-full max-w-4xl grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
-                            {favorites.map((station, index) => (
-                                <div
-                                    key={index}
-                                    className="flex items-center justify-between p-4 bg-yellow-100 rounded-lg shadow hover:shadow-lg transition duration-200"
-                                >
-                                    <div className="flex items-center">
-                                        <FaTrain className="text-yellow-500 w-6 h-6 mr-3" />
-                                        <span className="text-gray-800 font-medium">{station}</span>
-                                    </div>
-                                    <button
-                                        onClick={() => toggleFavorite(station)}
-                                        className="text-red-500 focus:outline-none"
-                                        aria-label="Remove from favorites"
-                                    >
-                                        <AiFillStar className="w-5 h-5" />
-                                    </button>
-                                </div>
-                            ))}
-                        </div>
-                    </div>
+      {/* Favorites Section (Optional) */}
+      {favorites.length > 0 && (
+        <div className="mt-8">
+          <h2 className="text-2xl font-semibold text-gray-800 mb-4">
+            Your Favorite Stations
+          </h2>
+          <div className="flex justify-center">
+            <div className="w-full max-w-4xl grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+              {favorites.map((station, index) => (
+                <div
+                  key={index}
+                  className="flex items-center justify-between p-4 bg-yellow-100 rounded-lg shadow hover:shadow-lg transition duration-200"
+                >
+                  <div className="flex items-center">
+                    <FaTrain className="text-yellow-500 w-6 h-6 mr-3" />
+                    <span className="text-gray-800 font-medium">{station}</span>
+                  </div>
+                  <button
+                    onClick={() => toggleFavorite(station)}
+                    className="text-red-500 focus:outline-none"
+                    aria-label="Remove from favorites"
+                  >
+                    <AiFillStar className="w-5 h-5" />
+                  </button>
                 </div>
-            )}
+              ))}
+            </div>
+          </div>
         </div>
-    );
+      )}
+    </div>
+  );
 };
 
 export default RailwayStations;