Menu page visuals

app/(site)/(aefeup)/menu/DayMenuCard.tsx

@@ -0,0 +1,57 @@
+import { motion } from "framer-motion";
+import React from "react";
+import { FaDrumstickBite } from "react-icons/fa";
+
+interface DayMenuCardProps {
+    day: string;
+    dishes: { icon: React.ReactNode; type: string; name: string }[];
+}
+
+const DayMenuCard = ({ day, dishes }: DayMenuCardProps) => {
+    return (
+        <div className="animate_top group relative rounded-lg border border-stroke bg-white p-7.5 shadow-solid-10 dark:border-strokedark dark:bg-blacksection dark:shadow-none min-w-67.5">
+            <motion.div
+                variants={{
+                    hidden: {
+                        opacity: 0,
+                        y: -20,
+                    },
+                    visible: {
+                        opacity: 1,
+                        y: 0,
+                    },
+                }}
+                initial="hidden"
+                whileInView="visible"
+                transition={{ duration: 0.5, delay: 0.1 }}
+                viewport={{ once: true }}
+            >
+                <h2 className="text-xl font-bold text-black">{day}</h2>
+                <div className="mt-4">
+                    <ul>
+                        {dishes.map((dish, index) => (
+                            <li
+                                key={index}
+                                className="flex flex-col items-start mb-4 text-black dark:text-white last:mb-0"
+                            >
+                                <div className="flex items-center">
+                                    <span className="mr-3 text-primary dark:text-white">
+                                        {dish.icon || <FaDrumstickBite />}
+                                    </span>
+                                    <div>
+                                        <div className="text-sm text-gray-500 dark:text-gray-400">
+                                            {dish.type}
+                                        </div>
+                                        <div className="text-lg font-medium">{dish.name}</div>
+                                    </div>
+                                </div>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            </motion.div>
+        </div>
+    );
+};
+
+export default DayMenuCard;

app/(site)/(aefeup)/menu/client.tsx

@@ -0,0 +1,96 @@
+"use client"
+
+import SectionHeader from "@/components/Common/SectionHeader"
+import DayMenuCard from "./DayMenuCard"
+import { useEffect, useState } from "react"
+
+interface Props {
+    categories: any[];
+    items: any[];
+    dayMenus: any[];
+}
+
+const ClientMenuPage = ({ categories, items, dayMenus }: Props) => {
+
+    const [selectedCategory, setSelectedCategory] = useState(categories[0].id);
+    const [filteredItems, setFilteredItems] = useState(items);
+
+    useEffect(() => {
+        setFilteredItems(items.filter((item) => item.category.id === selectedCategory).sort((a, b) => a.price - b.price));
+    }, [selectedCategory, items]);
+
+    return (<>
+        <section className="overflow-hidden pb-5 pt-25">
+            <div className="mx-auto max-w-c-1315 px-4 md:px-8 xl:px-0">
+                {/* <!-- Section Title Start --> */}
+                <div className="animate_top mx-auto text-center">
+                    <SectionHeader
+                        headerInfo={{
+                            title: `Ementa Bar`,
+                            subtitle: `Bar AEFEUP`,
+                            description: ``,
+                        }}
+                    />
+                </div>
+                {/* <!-- Section Title End --> */}
+                <div className="py-5">
+                    <div className="flex flex-wrap justify-center gap-7.5 lg:flex-nowrap xl:gap-12.5 overflow-y-scroll">
+                        {dayMenus.map(dayMenu => (
+                            <DayMenuCard
+                                key={dayMenu.id}
+                                day={new Date(dayMenu.day).toLocaleDateString("pt-PT", { weekday: "long" })}
+                                dishes={dayMenu.dishes.map(dish => ({
+                                    icon: null,
+                                    type: dish.dishType.name_pt,
+                                    name: dish.dish.name_pt
+                                }))}
+                            />
+                        ))}
+                        {/*
+                        <DayMenuCard
+                            day="Segunda-feira"
+                            dishes={[
+                                { icon: null, type: "Sopa", name: "Prato do dia" },
+                                { icon: null, type: "Carne", name: "Prato do dia" },
+                                { icon: null, type: "Peixe", name: "Prato do dia" },
+                                { icon: null, type: "Dieta", name: "Prato do dia" },
+                                { icon: null, type: "Sobremessa", name: "Prato do dia" },
+                            ]}
+                        />
+                         */}
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <div className="">
+            <section className='flex justify-center gap-5 my-5 flex-wrap'>
+                {categories.map((category) => (
+                    <button
+                        key={category.id}
+                        onClick={() => setSelectedCategory(category.id)}
+                        className={`py-2 px-4 rounded-lg transition-all duration-300 flex justify-center gap-5 ${selectedCategory === category.id
+                            ? "bg-primary text-white"
+                            : "bg-gray-200 dark:bg-gray-400 dark:text-black hover:shadow-lg"
+                            }`}
+                    >
+                        {category.name}
+                    </button>
+                ))}
+            </section>
+            <ul className="divide-y divide-gray-300 dark:divide-gray-600 max-w-[45%] mx-auto pb-15">
+                {filteredItems.filter((item) => item.category.id === selectedCategory).map((item) => (
+                    <li key={item.id} className="py-5">
+                        <div className="flex justify-between items-center">
+                            <p>{item.dish.name_pt}</p>
+                            <p>{item.price.toFixed(2).replace(".", ",")}€</p>
+                        </div>
+                    </li>
+                ))
+                }
+            </ul>
+        </div>
+    </>)
+}
+
+export default ClientMenuPage

app/(site)/(aefeup)/menu/page.tsx

@@ -0,0 +1,18 @@
+import ClientMenuPage from "./client"
+
+const MenuPage = async () => {
+
+   const ESTABLISHMENT_ID = 15;
+   const UBASE_RL = "http://ementas.sas.up.pt:3000/api/"
+   const URL = `${UBASE_RL}establishments/${ESTABLISHMENT_ID}`
+
+   const items = await (await fetch(`${URL}/permanent-menus`)).json()
+   const categories = await (await fetch(`${URL}/permanent-menus/categories`)).json()
+   // TODO: Remove hardcoded year and weekNumber
+   const dayMenus = await (await fetch(`${URL}/day-menus?period=LUNCH&year=2024&weekNumber=48`)).json()
+   console.log(dayMenus)
+
+   return <ClientMenuPage categories={categories} items={items} dayMenus={dayMenus} />
+}
+
+export default MenuPage

components/Header/menuData.tsx

@@ -21,6 +21,10 @@ const menuData: Menu[] = [
         title: "Serviços",
         path: "services"
       },
+      {
+        title: "Ementa Bar",
+        path: "menu"
+      },
       {
         title: "Eventos",
         path: "events"