Initial commit: json-render crepes demo

2026-02-09 07:30:54 +01:00
commit 9b750238c2
35 changed files with 9237 additions and 0 deletions
--- a/lib/registry.tsx
+++ b/lib/registry.tsx
@@ -0,0 +1,127 @@
+"use client";
+
+import { defineRegistry, DataProvider, VisibilityProvider, ActionProvider } from "@json-render/react";
+import { catalog } from "./catalog";
+import { ReactNode } from "react";
+
+export const { registry } = defineRegistry(catalog, {
+  components: {
+    RecipeHeader: ({ props }) => (
+      <div className="bg-gradient-to-r from-amber-50 to-orange-50 p-8 rounded-2xl shadow-lg mb-8 border-2 border-amber-200">
+        <h1 className="text-4xl font-bold text-gray-900 mb-3">{props.title}</h1>
+        <div className="flex flex-wrap gap-4 text-lg">
+          <span className="bg-white px-4 py-2 rounded-full shadow-sm">
+            👨‍🍳 <strong>Chef:</strong> {props.chef}
+          </span>
+          <span className="bg-white px-4 py-2 rounded-full shadow-sm">
+            🇫🇷 <strong>Origin:</strong> {props.origin}
+          </span>
+          <span className="bg-white px-4 py-2 rounded-full shadow-sm">
+            ⏱️ <strong>Prep:</strong> {props.prepTime}
+          </span>
+          <span className="bg-white px-4 py-2 rounded-full shadow-sm">
+            🍽️ <strong>Serves:</strong> {props.servings}
+          </span>
+        </div>
+      </div>
+    ),
+    ChefInfo: ({ props }) => (
+      <div className="bg-blue-50 p-6 rounded-xl shadow-md mb-8 border-l-4 border-blue-500">
+        <div className="flex items-start gap-4">
+          {props.imageUrl && (
+            <img
+              src={props.imageUrl}
+              alt={props.name}
+              className="w-24 h-24 rounded-full object-cover shadow-lg"
+            />
+          )}
+          <div className="flex-1">
+            <h2 className="text-2xl font-bold text-gray-900 mb-2">{props.name}</h2>
+            <p className="text-gray-700 mb-3">{props.bio}</p>
+            <a
+              href={props.sourceUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 text-blue-600 hover:text-blue-800 font-semibold underline"
+            >
+              📖 View Original Recipe
+            </a>
+          </div>
+        </div>
+      </div>
+    ),
+    IngredientList: ({ props }) => (
+      <div className="bg-green-50 p-6 rounded-xl shadow-md mb-6 border-l-4 border-green-500">
+        <h3 className="text-2xl font-bold text-gray-900 mb-4 flex items-center gap-2">
+          🥚 {props.title}
+        </h3>
+        <ul className="space-y-2">
+          {props.ingredients.map((ingredient: any, index: number) => (
+            <li key={index} className="flex items-baseline gap-3 text-lg">
+              <span className="text-green-600 font-bold">•</span>
+              <span className="font-semibold text-gray-900 min-w-[120px]">
+                {ingredient.quantity}
+              </span>
+              <span className="text-gray-700">{ingredient.name}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    ),
+    InstructionSteps: ({ props }) => (
+      <div className="bg-purple-50 p-6 rounded-xl shadow-md mb-6 border-l-4 border-purple-500">
+        <h3 className="text-2xl font-bold text-gray-900 mb-4 flex items-center gap-2">
+          📝 Instructions
+        </h3>
+        <ol className="space-y-4">
+          {props.steps.map((step: any) => (
+            <li key={step.number} className="flex gap-4">
+              <span className="flex-shrink-0 w-8 h-8 bg-purple-500 text-white rounded-full flex items-center justify-center font-bold">
+                {step.number}
+              </span>
+              <p className="text-gray-700 text-lg pt-1">{step.instruction}</p>
+            </li>
+          ))}
+        </ol>
+      </div>
+    ),
+    TipCard: ({ props }) => (
+      <div className="bg-yellow-50 p-6 rounded-xl shadow-md mb-6 border-l-4 border-yellow-500">
+        <div className="flex items-start gap-3">
+          <span className="text-3xl">💡</span>
+          <div>
+            <p className="text-gray-800 text-lg mb-2 italic">&ldquo;{props.tip}&rdquo;</p>
+            <p className="text-gray-600 font-semibold">— {props.author}</p>
+          </div>
+        </div>
+      </div>
+    ),
+    RecipeCard: ({ props, children }) => (
+      <div className="bg-white p-8 rounded-2xl shadow-xl mb-8 border border-gray-200">
+        {props.imageUrl && (
+          <img
+            src={props.imageUrl}
+            alt={props.title}
+            className="w-full h-64 object-cover rounded-xl mb-6 shadow-md"
+          />
+        )}
+        <h2 className="text-3xl font-bold text-gray-900 mb-3">{props.title}</h2>
+        <p className="text-gray-600 text-lg mb-6">{props.description}</p>
+        {children}
+      </div>
+    ),
+  },
+});
+
+// Provider wrapper for all required contexts
+export function Provider({ children }: { children: ReactNode }) {
+  return (
+    <ActionProvider>
+      <DataProvider>
+        <VisibilityProvider>
+          {children}
+        </VisibilityProvider>
+      </DataProvider>
+    </ActionProvider>
+  );
+}