Merge branch 'main' into Create-Paginated-Recipes-Endpoint-#73

Public/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "MyWebSite",
+  "short_name": "MySite",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

app/components/ui/card.js

@@ -0,0 +1,54 @@
+import * as React from "react"
+import { cn } from "../../../lib/utils"
+
+const Card = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn("text-2xl font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

app/layout.js

@@ -1,14 +1,62 @@
-import './global.css'
-
+import './global.css';
+/**
+ * Metadata configuration for the Next.js application.
+ * This object defines various site-wide metadata, including
+ * titles, descriptions, icons, social sharing information, and more.
+ */
 export const metadata = {
-  title: 'Next.js',
-  description: 'Generated by Next.js',
-}
+  title: "Arejeng Recipes",
+  description: "Arejeng Recipe App is your ultimate culinary companion, offering an extensive collection of easy-to-follow recipes that cater to every taste and occasion. Whether you're a seasoned chef or a kitchen newbie, our app empowers you to discover, save, and share delicious recipes from around the world. With step-by-step instructions, customizable recipe options, and handy cooking tips, Arejeng Recipe App makes every meal a memorable experience. Explore new flavors, create mouth-watering dishes, and let your cooking journey begin!",
+  icons: {
+    icon: [
+      { rel: "icon", url: "/favicon-192x192.png", sizes: "192x192" },
+      { rel: "icon", url: "/favicon.svg", type: "image/svg+xml" },
+      { rel: "shortcut icon", url: "/favicon.ico" },
+    ],
+    apple: "/apple-touch-icon.png",
+  },
+  manifest: "/site.webmanifest",
+  applicationName: "ArejengRecipeApp",
+  openGraph: {
+    title: "Arejeng Recipe App",
+    description: "Arejeng Recipe App is your ultimate culinary companion, offering an extensive collection of easy-to-follow recipes that cater to every taste and occasion. Whether you're a seasoned chef or a kitchen newbie, our app empowers you to discover, save, and share delicious recipes from around the world. With step-by-step instructions, customizable recipe options, and handy cooking tips, Arejeng Recipe App makes every meal a memorable experience. Explore new flavors, create mouth-watering dishes, and let your cooking journey begin",
+    // Uncomment and add the correct URL of the website if available
+    // url: "https://mywebsite.com", 
+    type: "website",
+    images: [
+      {
+        // Uncomment and add the correct URL for the Open Graph image if available
+        // url: "https://yourwebsite.com/og-image.jpg",
+        width: 800,
+        height: 600,
+        alt: "Arejeng Recipe App",
+      },
+    ],
+  },
+  keywords: ["recipes", "cooking", "food", "ArejengRecipeApp"],
+  author: "Neo Phetoane, Gomolemo Mogono, Omphile Morwane, Ikanyeng Adams, Kagiso Legodi, Jonas Mokawane $ Hlolelo Rampete", 
+};
+
+/**
+ * Viewport configuration for the Next.js application.
+ * Moved the themeColor here as per the latest Next.js requirements.
+ */
+export const viewport = {
+  themeColor: "#ffffff",
+};
 
+/**
+ * Root layout component for the Next.js application.
+ * This component wraps the entire app, providing the main HTML structure.
+ *
+ * @param {Object} props - The properties passed to the component.
+ * @param {React.ReactNode} props.children - The nested content to render inside the layout.
+ * @returns {JSX.Element} The RootLayout component.
+ */
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <body>{children}</body>
     </html>
-  )
+  );
 }

app/recipes/[id]/page.js

@@ -49,7 +49,18 @@ export default async function RecipeDetail({ params }) {
   }
 
   // Destructure with the correct property names
-  const { prep, cook, servings, title, description, tags, images } = recipe;
+  const {
+    prep,
+    cook,
+    servings,
+    title,
+    description,
+    tags,
+    images,
+    ingredients,
+    instructions,
+    nutrition
+  } = recipe;
 
   // Calculate total time
   const totalTime = (prep || 0) + (cook || 0);
@@ -162,24 +173,62 @@ export default async function RecipeDetail({ params }) {
             ))}
           </ul>
         </div>
-
         {/* Instructions Section */}
         <div>
           <div className="pt-6">
             <h2 className="text-2xl font-semibold mb-4">Instructions</h2>
             <ol className="space-y-4">
-              {instructions?.map((step, index) => (
+            {Array.isArray(instructions) ? (
+              instructions.map((step, index) => (
                 <li key={index} className="flex gap-4">
                   <span className="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-teal-100 text-teal-700 rounded-full font-medium">
                     {index + 1}
                   </span>
                   <p className="text-gray-700 pt-1">{step}</p>
                 </li>
-              ))}
+              ))
+            ) : (
+              <li className="text-gray-500">No instructions available.</li>
+            )}
             </ol>
           </div>
         </div>
       </div>
+      {/* Nutritional Information */}
+    {nutrition && (
+      <Card className="mt-8">
+        <CardContent className="pt-6">
+          <h2 className="text-2xl font-semibold mb-4">Nutritional Information</h2>
+          <div className="grid grid-cols-2 gap-4 text-gray-700">
+            {nutrition.calories && (
+              <div>
+                <p className="text-sm">Calories</p>
+                <p className="font-medium">{nutrition.calories} kcal</p>
+              </div>
+            )}
+            {nutrition.fats && (
+              <div>
+                <p className="text-sm">Fats</p>
+                <p className="font-medium">{nutrition.fats} g</p>
+              </div>
+            )}
+            {nutrition.carbohydrates && (
+              <div>
+                <p className="text-sm">Carbohydrates</p>
+                <p className="font-medium">{nutrition.carbohydrates} g</p>
+              </div>
+            )}
+            {nutrition.proteins && (
+              <div>
+                <p className="text-sm">Proteins</p>
+                <p className="font-medium">{nutrition.proteins} g</p>
+              </div>
+            )}
+            {/* Additional nutrition data fields if available */}
+          </div>
+        </CardContent>
+      </Card>
+    )}
     </main>
   );
 }

lib/utils.js

@@ -0,0 +1,6 @@
+import { clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs))
+}