Add dynamic pages

website/app/category/[category]/page.tsx

@@ -1,3 +1,4 @@
+import supabase from "@/utils/supabase";
 import Category from "./category";
 
 const FoodCategoryRestaurants = ({
@@ -11,5 +12,13 @@ const FoodCategoryRestaurants = ({
 export default FoodCategoryRestaurants;
 
 export async function generateStaticParams() {
-  return [{ category: "1" }, { category: "2" }, { category: "3" }];
+  const { data, error } = await supabase.from("categories").select("id");
+  if (error) throw error;
+
+  const pagesParams: any[] = [];
+  for (var i = 0; i < data.length; i++) {
+    pagesParams.push({ category: data[i].id.toString() });
+  }
+
+  return pagesParams;
 }

website/app/restaurants/[restaurant]/menu/menu.tsx

@@ -12,11 +12,7 @@ import "swiper/css";
 import "swiper/css/effect-fade";
 import "styles/reels.css";
 
-const Menu = ({
-  paramsData,
-}: {
-  paramsData: { restaurant: number };
-}) => {
+const Menu = ({ paramsData }: { paramsData: { restaurant: string } }) => {
   const [isRestaurantLoading, setIsRestaurantLoading] = useState(true);
   const [restaurantData, setRestaurantData] = useState(null);
   const [menuData, setAnimatedElements] = useState([]);

website/app/restaurants/[restaurant]/menu/page.tsx

@@ -1,15 +1,24 @@
+import supabase from "@/utils/supabase";
 import Menu from "./menu";
 
 const RestaurantMenuDetails = ({
   params,
 }: {
-  params: { restaurant: number };
+  params: { restaurant: string };
 }) => {
   return <Menu paramsData={params}></Menu>;
 };
 
 export default RestaurantMenuDetails;
 
 export async function generateStaticParams() {
-  return [{ restaurant: "1" }, { restaurant: "2" }, { restaurant: "3" }];
+  const { data, error } = await supabase.from("restaurants").select("id");
+  if (error) throw error;
+
+  const pagesParams: any[] = [];
+  for (var i = 0; i < data.length; i++) {
+    pagesParams.push({ restaurant: data[i].id.toString() });
+  }
+
+  return pagesParams;
 }

website/components/Hero/index.tsx

@@ -2,6 +2,7 @@
 
 import Image from "next/image";
 import Link from "next/link";
+import image1 from "@/public/images/banner/1.jpg";
 
 import { Autoplay } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
@@ -23,7 +24,7 @@ const Hero = () => {
           >
             <SwiperSlide>
               <Image
-                src="/images/banner/1.jpg"
+                src={image1}
                 fill
                 className="h-full w-full object-cover"
                 alt="banner-slide-image"