Skip to content

Commit 1d2d8a6

Browse files
ElzabeElsElzabeEls
authored
Merge branch 'main' into Server-Side_Rendering_for_Recipe_Detail_Page_#87
2 parents 3a4db2f + 8334989 commit 1d2d8a6

12 files changed

+191
-10
lines changed

‎Public/ArejengLogo.png

29.3 KB
Loading

‎Public/apple-touch-icon.png

9.96 KB
Loading

‎Public/favicon-48x48.png

1.52 KB
Loading

‎Public/favicon.ico

14.7 KB
Binary file not shown.

‎Public/favicon.svg

Lines changed: 3 additions & 0 deletions
Loading

‎Public/site.webmanifest

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "MyWebSite",
3+
"short_name": "MySite",
4+
"icons": [
5+
{
6+
"src": "/web-app-manifest-192x192.png",
7+
"sizes": "192x192",
8+
"type": "image/png",
9+
"purpose": "maskable"
10+
},
11+
{
12+
"src": "/web-app-manifest-512x512.png",
13+
"sizes": "512x512",
14+
"type": "image/png",
15+
"purpose": "maskable"
16+
}
17+
],
18+
"theme_color": "#ffffff",
19+
"background_color": "#ffffff",
20+
"display": "standalone"
21+
}

‎Public/web-app-manifest-192x192.png

11.1 KB
Loading

‎Public/web-app-manifest-512x512.png

50.3 KB
Loading

‎app/components/ui/card.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import * as React from "react"
2+
import { cn } from "../../../lib/utils"
3+
4+
const Card = React.forwardRef(({ className, ...props }, ref) => (
5+
<div
6+
ref={ref}
7+
className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
8+
{...props}
9+
/>
10+
))
11+
Card.displayName = "Card"
12+
13+
const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
14+
<div
15+
ref={ref}
16+
className={cn("flex flex-col space-y-1.5 p-6", className)}
17+
{...props}
18+
/>
19+
))
20+
CardHeader.displayName = "CardHeader"
21+
22+
const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
23+
<h3
24+
ref={ref}
25+
className={cn("text-2xl font-semibold leading-none tracking-tight", className)}
26+
{...props}
27+
/>
28+
))
29+
CardTitle.displayName = "CardTitle"
30+
31+
const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
32+
<p
33+
ref={ref}
34+
className={cn("text-sm text-muted-foreground", className)}
35+
{...props}
36+
/>
37+
))
38+
CardDescription.displayName = "CardDescription"
39+
40+
const CardContent = React.forwardRef(({ className, ...props }, ref) => (
41+
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
42+
))
43+
CardContent.displayName = "CardContent"
44+
45+
const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
46+
<div
47+
ref={ref}
48+
className={cn("flex items-center p-6 pt-0", className)}
49+
{...props}
50+
/>
51+
))
52+
CardFooter.displayName = "CardFooter"
53+
54+
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

‎app/layout.js

Lines changed: 54 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,62 @@
1-
import './global.css'
2-
1+
import './global.css';
2+
/**
3+
* Metadata configuration for the Next.js application.
4+
* This object defines various site-wide metadata, including
5+
* titles, descriptions, icons, social sharing information, and more.
6+
*/
37
export const metadata = {
4-
title: 'Next.js',
5-
description: 'Generated by Next.js',
6-
}
8+
title: "Arejeng Recipes",
9+
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!",
10+
icons: {
11+
icon: [
12+
{ rel: "icon", url: "/favicon-192x192.png", sizes: "192x192" },
13+
{ rel: "icon", url: "/favicon.svg", type: "image/svg+xml" },
14+
{ rel: "shortcut icon", url: "/favicon.ico" },
15+
],
16+
apple: "/apple-touch-icon.png",
17+
},
18+
manifest: "/site.webmanifest",
19+
applicationName: "ArejengRecipeApp",
20+
openGraph: {
21+
title: "Arejeng Recipe App",
22+
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",
23+
// Uncomment and add the correct URL of the website if available
24+
// url: "https://mywebsite.com",
25+
type: "website",
26+
images: [
27+
{
28+
// Uncomment and add the correct URL for the Open Graph image if available
29+
// url: "https://yourwebsite.com/og-image.jpg",
30+
width: 800,
31+
height: 600,
32+
alt: "Arejeng Recipe App",
33+
},
34+
],
35+
},
36+
keywords: ["recipes", "cooking", "food", "ArejengRecipeApp"],
37+
author: "Neo Phetoane, Gomolemo Mogono, Omphile Morwane, Ikanyeng Adams, Kagiso Legodi, Jonas Mokawane $ Hlolelo Rampete",
38+
};
39+
40+
/**
41+
* Viewport configuration for the Next.js application.
42+
* Moved the themeColor here as per the latest Next.js requirements.
43+
*/
44+
export const viewport = {
45+
themeColor: "#ffffff",
46+
};
747

48+
/**
49+
* Root layout component for the Next.js application.
50+
* This component wraps the entire app, providing the main HTML structure.
51+
*
52+
* @param {Object} props - The properties passed to the component.
53+
* @param {React.ReactNode} props.children - The nested content to render inside the layout.
54+
* @returns {JSX.Element} The RootLayout component.
55+
*/
856
export default function RootLayout({ children }) {
957
return (
1058
<html lang="en">
1159
<body>{children}</body>
1260
</html>
13-
)
61+
);
1462
}

‎app/recipes/[id]/page.js

Lines changed: 53 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,18 @@ export default async function RecipeDetail({ params }) {
4949
}
5050

5151
// Destructure with the correct property names
52-
const { prep, cook, servings, title, description, tags, images } = recipe;
52+
const {
53+
prep,
54+
cook,
55+
servings,
56+
title,
57+
description,
58+
tags,
59+
images,
60+
ingredients,
61+
instructions,
62+
nutrition
63+
} = recipe;
5364

5465
// Calculate total time
5566
const totalTime = (prep || 0) + (cook || 0);
@@ -162,24 +173,62 @@ export default async function RecipeDetail({ params }) {
162173
))}
163174
</ul>
164175
</div>
165-
166176
{/* Instructions Section */}
167177
<div>
168178
<div className="pt-6">
169179
<h2 className="text-2xl font-semibold mb-4">Instructions</h2>
170180
<ol className="space-y-4">
171-
{instructions?.map((step, index) => (
181+
{Array.isArray(instructions) ? (
182+
instructions.map((step, index) => (
172183
<li key={index} className="flex gap-4">
173184
<span className="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-teal-100 text-teal-700 rounded-full font-medium">
174185
{index + 1}
175186
</span>
176187
<p className="text-gray-700 pt-1">{step}</p>
177188
</li>
178-
))}
189+
))
190+
) : (
191+
<li className="text-gray-500">No instructions available.</li>
192+
)}
179193
</ol>
180194
</div>
181195
</div>
182196
</div>
197+
{/* Nutritional Information */}
198+
{nutrition && (
199+
<Card className="mt-8">
200+
<CardContent className="pt-6">
201+
<h2 className="text-2xl font-semibold mb-4">Nutritional Information</h2>
202+
<div className="grid grid-cols-2 gap-4 text-gray-700">
203+
{nutrition.calories && (
204+
<div>
205+
<p className="text-sm">Calories</p>
206+
<p className="font-medium">{nutrition.calories} kcal</p>
207+
</div>
208+
)}
209+
{nutrition.fats && (
210+
<div>
211+
<p className="text-sm">Fats</p>
212+
<p className="font-medium">{nutrition.fats} g</p>
213+
</div>
214+
)}
215+
{nutrition.carbohydrates && (
216+
<div>
217+
<p className="text-sm">Carbohydrates</p>
218+
<p className="font-medium">{nutrition.carbohydrates} g</p>
219+
</div>
220+
)}
221+
{nutrition.proteins && (
222+
<div>
223+
<p className="text-sm">Proteins</p>
224+
<p className="font-medium">{nutrition.proteins} g</p>
225+
</div>
226+
)}
227+
{/* Additional nutrition data fields if available */}
228+
</div>
229+
</CardContent>
230+
</Card>
231+
)}
183232
</main>
184233
);
185234
}

‎lib/utils.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { clsx } from "clsx"
2+
import { twMerge } from "tailwind-merge"
3+
4+
export function cn(...inputs) {
5+
return twMerge(clsx(inputs))
6+
}

0 commit comments

Comments
 (0)