diff --git a/Public/ArejengLogo.png b/Public/ArejengLogo.png new file mode 100644 index 0000000..73abb80 Binary files /dev/null and b/Public/ArejengLogo.png differ diff --git a/Public/apple-touch-icon.png b/Public/apple-touch-icon.png new file mode 100644 index 0000000..1e562f0 Binary files /dev/null and b/Public/apple-touch-icon.png differ diff --git a/Public/favicon-48x48.png b/Public/favicon-48x48.png new file mode 100644 index 0000000..6cbbf07 Binary files /dev/null and b/Public/favicon-48x48.png differ diff --git a/Public/favicon.ico b/Public/favicon.ico new file mode 100644 index 0000000..5392209 Binary files /dev/null and b/Public/favicon.ico differ diff --git a/Public/favicon.svg b/Public/favicon.svg new file mode 100644 index 0000000..600d3af --- /dev/null +++ b/Public/favicon.svg @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/Public/site.webmanifest b/Public/site.webmanifest new file mode 100644 index 0000000..ccf313a --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/Public/web-app-manifest-192x192.png b/Public/web-app-manifest-192x192.png new file mode 100644 index 0000000..972939a Binary files /dev/null and b/Public/web-app-manifest-192x192.png differ diff --git a/Public/web-app-manifest-512x512.png b/Public/web-app-manifest-512x512.png new file mode 100644 index 0000000..259052d Binary files /dev/null and b/Public/web-app-manifest-512x512.png differ diff --git a/app/components/ui/card.js b/app/components/ui/card.js new file mode 100644 index 0000000..13d6950 --- /dev/null +++ b/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) => ( +
+)) +Card.displayName = "Card" + +const CardHeader = React.forwardRef(({ className, ...props }, ref) => ( +
+)) +CardHeader.displayName = "CardHeader" + +const CardTitle = React.forwardRef(({ className, ...props }, ref) => ( +

+)) +CardTitle.displayName = "CardTitle" + +const CardDescription = React.forwardRef(({ className, ...props }, ref) => ( +

+)) +CardDescription.displayName = "CardDescription" + +const CardContent = React.forwardRef(({ className, ...props }, ref) => ( +

+)) +CardContent.displayName = "CardContent" + +const CardFooter = React.forwardRef(({ className, ...props }, ref) => ( +
+)) +CardFooter.displayName = "CardFooter" + +export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } \ No newline at end of file diff --git a/app/layout.js b/app/layout.js index 470a737..7a1b90a 100644 --- a/app/layout.js +++ b/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 ( {children} - ) + ); } diff --git a/app/recipes/[id]/page.js b/app/recipes/[id]/page.js index ae5625f..c75829d 100644 --- a/app/recipes/[id]/page.js +++ b/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 }) { ))}
- {/* Instructions Section */}

Instructions

    - {instructions?.map((step, index) => ( + {Array.isArray(instructions) ? ( + instructions.map((step, index) => (
  1. {index + 1}

    {step}

    2. - ))} + )) + ) : ( +
  2. No instructions available.
    3. + )}
+ {/* Nutritional Information */} + {nutrition && ( + + +

Nutritional Information

+
+ {nutrition.calories && ( +
+

Calories

+

{nutrition.calories} kcal

+
+ )} + {nutrition.fats && ( +
+

Fats

+

{nutrition.fats} g

+
+ )} + {nutrition.carbohydrates && ( +
+

Carbohydrates

+

{nutrition.carbohydrates} g

+
+ )} + {nutrition.proteins && ( +
+

Proteins

+

{nutrition.proteins} g

+
+ )} + {/* Additional nutrition data fields if available */} +
+ + + )} ); } diff --git a/lib/utils.js b/lib/utils.js new file mode 100644 index 0000000..834ce67 --- /dev/null +++ b/lib/utils.js @@ -0,0 +1,6 @@ +import { clsx } from "clsx" +import { twMerge } from "tailwind-merge" + +export function cn(...inputs) { + return twMerge(clsx(inputs)) +} \ No newline at end of file