Merge pull request #11 from Itera/feature/menu

feature: added menu and restaurant home to page

restaurant/web/src/App.tsx

@@ -1,15 +1,19 @@
 import { Route, Routes } from "react-router-dom";
 import Home from "./pages/Home";
+import RestaurantHome from "./pages/RestaurantHome";
 import RestaurantOverview from "./pages/RestaurantOverview";
 
+
 const App = () => {
 
   return (
     <Routes>
       <Route path="/" element={<Home />}>
       </Route>
-      <Route path="/restaurants" element={<RestaurantOverview />}>
-      </Route>
+      <Route path="/restaurant" element={<RestaurantHome />}/>
+
+      <Route path="/restaurants" element={<RestaurantOverview />}/>
+
     </Routes>
   )
 

restaurant/web/src/pages/Home.tsx

@@ -1,11 +1,12 @@
 import { useAccount, useMsal } from '@azure/msal-react';
-import { Box, Button, Flex, Heading, Text, Tooltip } from '@chakra-ui/react';
+import { Box, Button, Flex, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
 import { Guest, Room } from 'cms-types';
 import { useEffect } from 'react';
 import useAccessToken from '../auth/useAccessToken';
 import { useGet } from '../hooks/useGet';
+import { Link as ReactLink } from 'react-router-dom';
 
-const Home = () => {
+const Home = () => {  
   const { accounts } = useMsal();
   const account = useAccount(accounts[0] || {});
   const accessToken = useAccessToken();
@@ -84,6 +85,7 @@ const Home = () => {
               'Copy access token to clipboard'
             )}
         </Box>
+        <Link as={ReactLink} to="/restaurant"><Button variant='solid' colorScheme='blue'> Restaurant</Button></Link>
       </Box>
     </Flex>
   );
@@ -95,7 +97,9 @@ const CopyToClipboardButton = (text: string, label?: string) => {
   };
 
   return (
+
     <Tooltip label={label ?? 'Copy to clipboard'}>
+
       <Button
         w="fit-content"
         p="4"
@@ -108,7 +112,7 @@ const CopyToClipboardButton = (text: string, label?: string) => {
         color="white"
         fontSize="l"
         onClick={copyToClipboard}
-      >
+        >
         📄
       </Button>
     </Tooltip>

restaurant/web/src/pages/Menu.tsx

@@ -0,0 +1,55 @@
+import { Box, Text } from "@chakra-ui/react";
+import theme from "../theme";
+
+
+
+
+      export interface Course {
+        title: string;
+        description: string;
+        allergies: string;
+        picture: string;
+        price: number;
+      }
+
+      export interface MenuProps {
+        courses: Course[];
+      }
+
+      function Menu({ courses }: MenuProps) {
+        return (
+          <Box display="flex" flexWrap="wrap" bgColor={theme.colors["explore-blue"].main}>
+      {courses.map((course) => (
+        <Box
+          key={course.title}
+          p={2}
+          shadow="md"
+          borderWidth="0px"
+          width="100%"
+          height="100%"
+          m={4}
+          borderRadius="md"
+          backgroundColor={theme.colors["explore-yellow"].main}
+        >
+          <Text fontStyle="" fontSize="xl" fontWeight="bold" color={theme.colors["explore-blue"].main}>
+            {course.title}
+          </Text>
+          <Text mt={2} color={theme.colors["explore-blue"].main}>{course.description}  </Text>
+          <Text mt={2} fontWeight="bold" color={theme.colors["explore-blue"].main}>
+            Allergies: {course.allergies}
+          </Text>
+          <img
+            src={course.picture}
+            alt={course.title}
+            style={{ width: "100%", height: "200px", objectFit: "cover" }}
+          />
+          <Text mt={2} color={theme.colors["explore-blue"].main}>Price: {course.price} €</Text>
+        </Box>
+      ))}
+    </Box>
+  );
+    }
+
+
+
+export default Menu;

restaurant/web/src/pages/RestaurantHome.tsx

@@ -0,0 +1,39 @@
+import { Box, Button, Heading, Stack, Text } from "@chakra-ui/react"
+import data from "./menu.json";
+import Menu from "./Menu";
+import theme from "../theme";
+
+
+
+const RestaurantHome = () => {
+
+
+
+
+    return (
+        <Stack spacing={4} direction="column" align="center" bgColor={theme.colors["explore-blue"].main} >
+
+        <Box p={4} alignContent="center">
+            <Heading as="h1" size="2xl" color={theme.colors["explore-yellow"].main}>
+                    Restaurant Name
+                </Heading>
+                <Text mt={4} color={theme.colors["explore-yellow"].main}>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod
+                    mauris vel sapien tincidunt, vel bibendum sapien bibendum. Nulla
+                    facilisi. Sed euismod mauris vel sapien tincidunt, vel bibendum sapien
+                    bibendum. Nulla facilisi.
+                </Text>
+                <Button mt={4} bgColor={theme.colors["explore-yellow"].main} textColor={theme.colors["explore-blue"].main}>
+                    Book a Table
+                </Button>
+            </Box>
+
+
+        <Menu courses={data.courses} />
+
+        </Stack>
+
+    )
+}
+
+export default RestaurantHome;

restaurant/web/src/pages/menu.json

@@ -0,0 +1,40 @@
+{
+    "courses": [
+      {
+        "title": "Roasted Butternut Squash Soup",
+        "description": "A creamy soup made with roasted butternut squash, onions, garlic and vegetable broth. Served with a side of crusty bread.",
+        "allergies": "nuts",
+        "picture": "https://www.cookingclassy.com/wp-content/uploads/2018/08/butternut-squash-soup-2.jpg",
+        "price": 15.99
+      },
+      {
+        "title": "Pan-Seared Salmon with Lemon Butter Sauce",
+        "description": "A delicious salmon fillet pan-seared to perfection and served with a tangy lemon butter sauce. Served with a side of roasted vegetables.",
+        "allergies": "fish",
+        "picture": "https://th.bing.com/th/id/OIP.ahFs2tJ6TsWbpgN6A6eI_gHaLH?pid=ImgDet&rs=1",
+        "price": 19.99
+      },
+      {
+        "title": "Wild Mushroom Risotto",
+        "description": "A creamy risotto made with wild mushrooms, arborio rice, onions and vegetable broth. Topped with shaved parmesan cheese.",
+        "allergies": "mushrooms",
+        "picture": "https://i1.wp.com/chezlerevefrancais.com/wp-content/uploads/2017/10/WILD-MUSHROOM-RISOTTO-2.jpg",
+        "price": 17.99
+      },
+      {
+        "title": "Grilled Ribeye Steak with Chimichurri Sauce",
+        "description": "A juicy ribeye steak grilled to perfection and served with a tangy chimichurri sauce. Served with a side of garlic mashed potatoes.",
+        "allergies": "meat",
+        "picture": "https://earlebrown.com/the-chef-experience/wp-content/uploads/2021/03/ribeye-steak-768x512.jpg",
+        "price": 23.99
+      },
+      {
+        "title": "Crispy Fried Calamari",
+        "description": "A crispy fried calamari dish served with a side of marinara sauce and lemon wedges.",
+        "allergies": "fish",
+        "picture": "https://www.willcookforsmiles.com/wp-content/uploads/2021/07/Calamari-5.jpg",
+        "price": 21.99
+      }
+    ]
+  }
+