frontend without styling

frontend/package.json

@@ -16,6 +16,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",
+    "react-router-dom": "^6.23.1",
     "styled-components": "^6.1.11"
   },
   "devDependencies": {

frontend/src/App.tsx

@@ -1,11 +1,20 @@
+import { Routes, Route } from "react-router-dom";
 import RestaurantsPage from "./pages/RestaurantsPage.tsx";
-
+import RestaurantDetails from "./components/RestaurantDetails/RestaurantDetails.tsx";
 function App() {
 
     return (
-        <>
-            <RestaurantsPage />
-        </>
+
+        <Routes>
+            <Route path="/" element={<RestaurantsPage />} />
+            <Route path="/restaurants/:id" element={<RestaurantDetails />} />
+            {/* Weitere Routen hier hinzufügen, falls nötig */}
+        </Routes>
+
+
+    /*<>
+        <RestaurantsPage />
+    </>*/
     )
 }
 

frontend/src/components/RestaurantCard/RestaurantCard.styled.ts

@@ -24,4 +24,22 @@ export const StyledDetailsContainer = styled.div`
 
 export const StyledDetailsTitle = styled.h2`
     margin-bottom: 5px;
+`;
+
+export const StyledDetailsButton = styled.button`
+  background-color: #6200ea;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+
+  &:hover {
+    background-color: #3700b3;
+  }
+
+  &:active {
+    background-color: #03dac5;
+  }
 `;

frontend/src/components/RestaurantCard/RestaurantCard.tsx

@@ -1,19 +1,29 @@
 import {RestaurantType} from "../../model/Restaurant.ts";
+import { useNavigate } from "react-router-dom";
 import {FaLocationDot} from "react-icons/fa6";
 import RestaurantCardDetail from "../RestaurantCardDetail/RestaurantCardDetail.tsx";
 import {
     StyledArticle,
     StyledDetailsContainer,
     StyledDetailsTitle,
     StyledFallbackImage,
-    StyledImageContainer
+    StyledImageContainer,
+    StyledDetailsButton
 } from "./RestaurantCard.styled.ts";
 
 type RestaurantCardProps = {
     restaurant: RestaurantType,
 }
 
 export default function RestaurantCard({restaurant}: RestaurantCardProps) {
+    const navigate = useNavigate();
+
+    const handleDetailsClick = () => {
+        navigate(`/restaurants/${restaurant.id}`);
+    };
+
+
+
     return (
         <StyledArticle>
             <StyledImageContainer>
@@ -23,6 +33,7 @@ export default function RestaurantCard({restaurant}: RestaurantCardProps) {
             <StyledDetailsContainer>
                 <StyledDetailsTitle>{restaurant.title}</StyledDetailsTitle>
                 <RestaurantCardDetail icon={<FaLocationDot/>} value={restaurant.city}/>
+                <StyledDetailsButton onClick={handleDetailsClick}>Details</StyledDetailsButton>
             </StyledDetailsContainer>
         </StyledArticle>
     )

frontend/src/components/RestaurantDetails/RestaurantDetails.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useState } from "react";
+import {useNavigate, useParams} from "react-router-dom";
+import axios from "axios";
+import { RestaurantType } from "../../model/Restaurant.ts";
+import {StyledDetailsButton} from "../RestaurantCard/RestaurantCard.styled.ts";
+
+export default function RestaurantDetails() {
+    const { id } = useParams<{ id: string }>();
+    const [restaurant, setRestaurant] = useState<RestaurantType>();
+    const [error, setError] = useState<string | null>(null);
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        axios.get(`/api/restaurants/${id}`)
+            .then(response => {
+                setRestaurant(response.data);
+            })
+            .catch(error => {
+                setError("There was an error fetching the restaurant details!");
+                console.error(error);
+            });
+    }, [id]);
+
+    if (error) {
+        return <div>{error}</div>;
+    }
+
+    if (!restaurant) {
+        return <div>Loading...</div>;
+    }
+
+    const handleDetailsClick = () => {
+        navigate(`/`);
+    };
+
+    return (
+        <div>
+            <h1>{restaurant.title}</h1>
+            <p>{restaurant.city}</p>
+
+            <h1>sdofihsdijfpsdjf</h1>
+            <br/>
+            <h1>uosijdfoisdfoihsodihfosihdf</h1>
+            <br/>
+            <h1>hier Button um zurückzukommen auf mainpage</h1>
+            <StyledDetailsButton onClick={handleDetailsClick}>BACK</StyledDetailsButton>
+
+        </div>
+    );
+}

frontend/src/main.tsx

@@ -2,9 +2,12 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
+import { BrowserRouter } from "react-router-dom";
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
   </React.StrictMode>,
 )