From 580e8e7c96f553d1713f6a9b80dc2a4f8ef2a9f0 Mon Sep 17 00:00:00 2001 From: Prem Kolte Date: Mon, 7 Oct 2024 13:53:09 +0530 Subject: [PATCH] add stations page --- frontend/src/App.jsx | 2 + frontend/src/Pages/Herosection.jsx | 6 +- frontend/src/Pages/stations.jsx | 168 +++++++++++++++++++++++++++++ package-lock.json | 39 +++++++ package.json | 1 + 5 files changed, 215 insertions(+), 1 deletion(-) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 1939c46..4438f96 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -5,6 +5,7 @@ import Register from './Pages/Register'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import chatbotsvg from './assets/svg/chatbot.svg'; import { useNavigate, Outlet } from 'react-router-dom'; +import RailwayStations from './Pages/stations'; import './App.css' function App() { @@ -16,6 +17,7 @@ function App() { } /> } /> } /> + } /> {/* This route is just for testing protected routes it can be removed later when there is a route other than login or signup */} }> diff --git a/frontend/src/Pages/Herosection.jsx b/frontend/src/Pages/Herosection.jsx index 2cea13c..6d510e5 100644 --- a/frontend/src/Pages/Herosection.jsx +++ b/frontend/src/Pages/Herosection.jsx @@ -23,6 +23,9 @@ const Herosection = () => { const RegisterClick = () => { navigate('/Register'); // Navigates to the login page }; + const StationCLick = () => { + navigate('/Stations'); // Navigates to the login page + }; return ( <> @@ -48,7 +51,8 @@ const Herosection = () => {

Navigation

Booking

-

Station

+

+

3D Map

Schedule

Notification

diff --git a/frontend/src/Pages/stations.jsx b/frontend/src/Pages/stations.jsx index e69de29..f89e896 100644 --- a/frontend/src/Pages/stations.jsx +++ b/frontend/src/Pages/stations.jsx @@ -0,0 +1,168 @@ +// 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 + +const RailwayStations = () => { + // Comprehensive list of railway stations + const stations = [ + 'Mumbai Central', + 'Chhatrapati Shivaji Maharaj Terminus', + 'Delhi Junction', + 'Kolkata Chitpur', + 'Bangalore City', + 'Hyderabad Deccan', + 'Ahmedabad Junction', + 'Chennai Central', + 'Pune Junction', + 'Lucknow Charbagh', + 'Jaipur Junction', + 'Kanpur Central', + 'Nagpur Junction', + 'Surat Junction', + 'Patna Junction', + 'Indore Junction', + 'Vadodara Junction', + 'Bhopal Junction', + 'Guwahati Junction', + 'Amritsar Junction', + 'Secunderabad Junction', + 'Vijayawada Junction', + 'Cochin Ernakulam Junction', + 'Howrah Junction', + 'Dibrugarh Junction', + 'Thiruvananthapuram Central', + 'Visakhapatnam Junction', + 'Udaipur City', + 'Gwalior Junction', + 'Agra Cantonment', + 'Bareilly Junction', + 'Jammu Tawi', + 'Bhubaneswar', + 'Dehradun', + 'Mysore Junction', + 'Hubli Junction', + 'Kota Junction', + 'Srinagar Junction', + 'Varanasi Junction', + 'Allahabad Junction', + 'Mangalore Junction', + 'Bareilly Junction', + 'Amritsar Cantonment', + 'Jabalpur Junction', + 'Kalyan Junction', + 'Gurgaon Junction', + 'Bilaspur Junction', + 'Ranchi Junction', + 'Ujjain Junction', + 'Coimbatore Junction', + 'Tirupati', + 'Guntur Junction', + 'Kota Junction', + 'Siliguri Junction', + 'Nanded Junction', + 'Bikaner Junction', + 'Madurai Junction', + 'Rourkela Junction', + 'Jodhpur Junction', + // Add more stations as needed + ]; + + const [searchTerm, setSearchTerm] = useState(''); + const [favorites, setFavorites] = useState([]); + + // Function to toggle favorite stations + const toggleFavorite = (station) => { + if (favorites.includes(station)) { + setFavorites(favorites.filter((fav) => fav !== station)); + } else { + setFavorites([...favorites, station]); + } + }; + + // Filter stations based on search term + const filteredStations = stations.filter((station) => + station.toLowerCase().includes(searchTerm.toLowerCase()) + ); + + return ( +
+ {/* Header Section */} +
+

Railway Stations

+

Find and explore railway stations across India

+
+ + {/* Search Bar */} +
+ 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" + /> +
+ + {/* Stations Grid */} +
+
+ {filteredStations.length > 0 ? ( + filteredStations.map((station, index) => ( +
+
+ + {station} +
+ +
+ )) + ) : ( +
No stations found.
+ )} +
+
+ + {/* Favorites Section (Optional) */} + {favorites.length > 0 && ( +
+

Your Favorite Stations

+
+
+ {favorites.map((station, index) => ( +
+
+ + {station} +
+ +
+ ))} +
+
+
+ )} +
+ ); +}; + +export default RailwayStations; diff --git a/package-lock.json b/package-lock.json index 312904c..115997a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "packages": { "": { "dependencies": { + "react-icons": "^5.3.0", "vite": "^5.4.8" } }, @@ -600,6 +601,24 @@ "node": "^8.16.0 || ^10.6.0 || >=11.0.0" } }, + "node_modules/js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "peer": true + }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "peer": true, + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, "node_modules/nanoid": { "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", @@ -649,6 +668,26 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/react": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", + "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-icons": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz", + "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/rollup": { "version": "4.24.0", "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.24.0.tgz", diff --git a/package.json b/package.json index 1c1f6e8..cc4eac5 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { "dependencies": { + "react-icons": "^5.3.0", "vite": "^5.4.8" } }