Components
Recipe Card This component displays a recipe with nutritional information and ingredients in a clean, card-based layout. It's fully prop-driven, making it easy to reuse for any recipe.
Loading preview...
// demo.tsx
import { RecipeCard } from "@/components/ui/recipe-card-2"; // Adjust the import path
const RecipeCardDemo = () => {
// Data for the recipe card, easily updatable
const hamburgerData = {
title: "Classic beef burgers, 15 min cook time",
heading: "Hamburger",
imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-azbkcojk7G9xRKqA75hmDxp8KWWgDZ.png&w=1000&q=75", // Using an external link for the image
nutrition: [
{ label: "Calories", value: "650" },
{ label: "Protein", value: "31g" },
{ label: "Fat", value: "27g" },
{ label: "Carbs", value: "42g" },
],
ingredients: [
"1 pound ground lean beef",
"1/2 cup minced onion",
"1/4 cup fine dried bread crumbs",
"1/2 teaspoon salt",
"1/4 teaspoon pepper",
"1 hamburger buns",
"1/4 cup mayonnaise",
"1/4 cup ketchup",
"1 iceberg lettuce leaves",
"1 firm-ripe tomato",
"1/4 cup fine dried bread crumbs",
"1/2 teaspoon salt",
"1/4 teaspoon pepper",
"1 hamburger buns",
"1/4 cup mayonnaise",
"1/4 cup ketchup",
,
],
};
return (
<div className="flex items-center justify-center bg-background p-4 min-h-screen">
<RecipeCard
title={hamburgerData.title}
heading={hamburgerData.heading}
imageSrc={hamburgerData.imageSrc}
nutrition={hamburgerData.nutrition}
ingredients={hamburgerData.ingredients}
/>
</div>
);
};
export default RecipeCardDemo;