Implement MenuItemComponent for Lyche

frontend/src/AppRoutes.tsx

@@ -15,6 +15,7 @@ import {
   LycheAboutPage,
   LycheContactPage,
   LycheHomePage,
+  LycheMenuPage,
   NotFoundPage,
   RecruitmentAdmissionFormPage,
   RecruitmentPage,
@@ -232,6 +233,7 @@ export function AppRoutes() {
       <Route element={<SultenOutlet />}>
         <Route path={ROUTES.frontend.sulten} element={<LycheHomePage />} />
         <Route path={ROUTES.frontend.sulten_about} element={<LycheAboutPage />} />
+        <Route path={ROUTES.frontend.sulten_menu} element={<LycheMenuPage />} />
         <Route path={ROUTES.frontend.sulten_contact} element={<LycheContactPage />} />
       </Route>
 

frontend/src/Components/MenuItem/MenuItem.module.scss

@@ -0,0 +1,46 @@
+@import 'src/constants';
+
+.menu_item {
+  padding: 5px;
+  padding-left: 20px;
+  padding-right: 20px;
+  max-width: 600px;
+  margin: 0 auto;
+  color: white;
+
+}
+
+.item_name {
+  color: white;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: space-between;
+  font-size: 1.25em;
+  margin-bottom: 5px;
+  text-transform: uppercase;
+  font-family: 'LemonMilkLight', sans-serif;
+}
+
+.item_price {
+  font-size: .75em;
+  margin-left: 20px;
+  margin-top: .25em;
+  font-family: 'Lora', sans-serif;
+  color: white;
+}
+
+.item_description {
+  color: dimgray;
+  font-family: 'Lora', sans-serif;
+}
+
+.item_allergens {
+  color: dimgray;
+  font-family: 'Lora', sans-serif;
+}
+
+.item_recommendations {
+  color: dimgray;
+  font-family: 'Lora', sans-serif;
+}

frontend/src/Components/MenuItem/MenuItem.tsx

@@ -0,0 +1,25 @@
+import styles from './MenuItem.module.scss';
+
+type MenuItemProps = {
+  dishTitle: string;
+  dishDescription: string;
+  allergens?: string;
+  recommendations?: string;
+  price: string;
+};
+
+export function MenuItem({ dishTitle, dishDescription, allergens, recommendations, price }: MenuItemProps) {
+  return (
+    <div className={styles.menu_item}>
+      <div className={styles.item_name}>
+        {dishTitle}
+        <div className={styles.item_price}> {price} </div>
+      </div>
+      <div className={styles.item_description}> {dishDescription} </div>
+      <br></br>
+      {allergens && <div className={styles.item_allergens}> {allergens} </div>}
+      <br></br>
+      {recommendations && <div className={styles.item_recommendations}> {recommendations} </div>}
+    </div>
+  );
+}

frontend/src/Components/MenuItem/index.ts

@@ -0,0 +1 @@
+export { MenuItem } from './MenuItem';

frontend/src/Pages/LycheMenuPage/LycheMenuPage.tsx

@@ -0,0 +1,48 @@
+import { MenuItem } from '~/Components/MenuItem';
+import { SultenPage } from '~/Components/SultenPage';
+
+export function LycheMenuPage() {
+  return (
+    <SultenPage>
+      <MenuItem
+        dishTitle="LYCHEBRØD"
+        dishDescription="Serveres med en skål aioli på siden."
+        allergens="Allergener: Gluten (hvete), sulfitt og egg (aioli)"
+        price="19,- / 29,-"
+      />
+
+      <br></br>
+      <br></br>
+
+      <MenuItem
+        dishTitle="LYCHESNITTER"
+        dishDescription="Lychebrød med rødbethummus, ruccula, mango og pistou. "
+        allergens="Allergener: Gluten (hvete), melk (pistou), sesam (hummus). Kan inneholde spor av peanøtter: hummus"
+        price="40,- / 49,-"
+      />
+
+      <br></br>
+      <br></br>
+
+      <MenuItem
+        dishTitle="LYCHEBURGER"
+        dishDescription="Okse og n’duja kjøtt, servert med løkkompott, bacon,
+         tomater, aioli, cheddar, salat og potet på siden.
+          Burgeren kan serveres med glutenfritt brød, og kan serveres uten ost og pistou (melkeallergi)"
+        allergens="Allergener: Egg, sennep, sulfitt. Det er svinekjøtt i selve burgerkaken. "
+        recommendations="Baren anbefaler: Hacienda lopez De Haro (rød)"
+        price="129,- / 154,-"
+      />
+
+      <br></br>
+
+      <MenuItem
+        dishTitle="SOPPAI"
+        dishDescription="Kremet soppai med feta, toppes med ruccula. Vegetar."
+        allergens="Allergener: Melk og gluten"
+        recommendations="Baren anbefaler: jue de vie"
+        price="99,- / 119,-"
+      />
+    </SultenPage>
+  );
+}

frontend/src/Pages/LycheMenuPage/index.ts

@@ -0,0 +1 @@
+export { LycheMenuPage } from './LycheMenuPage';

frontend/src/Pages/index.ts

@@ -13,6 +13,7 @@ export { LoginPage } from './LoginPage';
 export { LycheContactPage } from './LycheContactPage';
 export { LycheAboutPage } from './LycheAboutPage';
 export { LycheHomePage } from './LycheHomePage';
+export { LycheMenuPage } from './LycheMenuPage';
 export { NotFoundPage } from './NotFoundPage';
 export { RecruitmentAdmissionFormPage } from './RecruitmentAdmissionFormPage';
 export { RecruitmentPage } from './RecruitmentPage';