[frontend]: Add help page
This commit is contained in:
@ -4,6 +4,7 @@ import Cookies from "js-cookie";
|
|||||||
|
|
||||||
import Navbar from "./components/Navbar";
|
import Navbar from "./components/Navbar";
|
||||||
import Statistics from "./components/Statistics.jsx";
|
import Statistics from "./components/Statistics.jsx";
|
||||||
|
import Help from "./components/Help.jsx";
|
||||||
|
|
||||||
import Sidebar from "./components/Sidebar";
|
import Sidebar from "./components/Sidebar";
|
||||||
import MapComponent from "./components/MapComponent";
|
import MapComponent from "./components/MapComponent";
|
||||||
@ -492,6 +493,7 @@ function App() {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
<Route path="/statistics" element={<Statistics />} />
|
<Route path="/statistics" element={<Statistics />} />
|
||||||
|
<Route path="/help" element={<Help />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
</Router>
|
</Router>
|
||||||
);
|
);
|
||||||
|
|||||||
109
frontend/src/components/Help.jsx
Normal file
109
frontend/src/components/Help.jsx
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const Help = () => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: "100vh",
|
||||||
|
width: "100%",
|
||||||
|
display: "flex",
|
||||||
|
position: "relative",
|
||||||
|
padding: "4vh",
|
||||||
|
paddingTop: "7vh",
|
||||||
|
backgroundColor: "white",
|
||||||
|
overflowX: "hidden",
|
||||||
|
alignItems: "center",
|
||||||
|
alignSelf: "center",
|
||||||
|
justifyItems: "center",
|
||||||
|
}}
|
||||||
|
className="min-h-screen w-full flex flex-col bg-white pt-[7vh] px-4"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className=" bg-white p-8 mx-auto px-4 flex flex-wrap gap-4 pt-[4vh] justify-center">
|
||||||
|
<h1 className="text-3xl font-bold text-center mb-6 text-gray-800">Help & Frequently Asked Questions</h1>
|
||||||
|
<div className="space-y-6 text-gray-700 text-lg">
|
||||||
|
<div>
|
||||||
|
<h2 className="font-semibold text-xl">🔍 How do I search for a service?</h2>
|
||||||
|
<p>
|
||||||
|
Type what you want to search for in the search bar on the map screen.
|
||||||
|
As you type, the items on the map will be filtered in real-time to only display items which
|
||||||
|
match your search.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
<div>
|
||||||
|
<h2 className="font-semibold text-xl">🚂 How can I see the punctuality of a train?</h2>
|
||||||
|
<p>
|
||||||
|
Click the marker for a train on the map and the train's punctuality and average punctuality
|
||||||
|
will be listed along with other details about that train.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2 className="font-semibold text-xl">🚌 How can I see the punctuality of a bus?</h2>
|
||||||
|
<p>
|
||||||
|
Unfortunately, this data is not made publicly available and so is not displayed in this application 😔.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2 className="font-semibold text-xl">⭐ How do I favourite a service?</h2>
|
||||||
|
<p>
|
||||||
|
Click on a marker on the map to open its pop-up.
|
||||||
|
Click the ⭐ icon in the top right-hand corner of the pop-up to add the item to your
|
||||||
|
favourites.
|
||||||
|
This is saved to your browser and will be remembered next time you come back to the website
|
||||||
|
(so long as you don't delete your cookies!).
|
||||||
|
To remove an item from your favourites, simply click the ⭐ button again.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
<div>
|
||||||
|
<h2 className="font-semibold text-xl">🚋 How do I see Luas information?</h2>
|
||||||
|
<p>
|
||||||
|
Luas data is available by clicking on the marker of a Luas stop and clicking the "Load
|
||||||
|
inbound/outbound trams" button.
|
||||||
|
This will display the next few trams due into and out of that stop.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
<div>
|
||||||
|
<h2 className="font-semibold text-xl">🚆 How do I find incoming train information?</h2>
|
||||||
|
<p>
|
||||||
|
Click the marker of an Irish Rail Station and then click the "Load incoming trains" button.
|
||||||
|
This will display all trains due into that station in the next 90 minutes.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
<div>
|
||||||
|
<h2 className="font-semibold text-xl">📍 How do I show only services within a certain range?</h2>
|
||||||
|
<p>
|
||||||
|
At the bottom of the Filters panel, enter a distance in kilometers. Only services within
|
||||||
|
that
|
||||||
|
range from your current location will be shown.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
<div>
|
||||||
|
<h2 className="font-semibold text-xl">❗ Why isn't the range filter appearing?</h2>
|
||||||
|
<p>
|
||||||
|
The range option only appears if your browser grants the app access to your location. If it
|
||||||
|
doesn't appear, ensure location services are enabled and that you've allowed access when
|
||||||
|
prompted.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Help;
|
||||||
@ -63,6 +63,20 @@ const Navbar = () => {
|
|||||||
>
|
>
|
||||||
Statistics
|
Statistics
|
||||||
</Link>
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="/help"
|
||||||
|
style={{
|
||||||
|
textDecoration: "none",
|
||||||
|
color: "black",
|
||||||
|
padding: "5px 10px",
|
||||||
|
borderRadius: "5px",
|
||||||
|
transition: "background 0.2s",
|
||||||
|
}}
|
||||||
|
onMouseEnter={(e) => (e.target.style.background = "rgba(0, 0, 0, 0.1)")}
|
||||||
|
onMouseLeave={(e) => (e.target.style.background = "transparent")}
|
||||||
|
>
|
||||||
|
Help
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user