Skip to content

Commit

Permalink
Added back button on station page
Browse files Browse the repository at this point in the history
  • Loading branch information
@AyushSharma72
AyushSharma72 committed Oct 9, 2024
1 parent c785268 commit 52d8dd3
Show file tree
Hide file tree
Showing 2 changed files with 124 additions and 95 deletions.
2 changes: 1 addition & 1 deletion frontend/src/Pages/Register.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const Register = () => {

const handleRegister = (e) => {
e.preventDefault();
// Handle registration logic here
// Handle registration logic here
};

return (
Expand Down
217 changes: 123 additions & 94 deletions frontend/src/Pages/stations.jsx
View file
Original file line number Diff line number Diff line change
@@ -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",
Expand Down Expand Up @@ -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;

0 comments on commit 52d8dd3

Please sign in to comment.