Initial commit

meal-plan-frontend/src/pages/RecipeDetailPage.tsx

@@ -0,0 +1,45 @@
+import { ArrowLeft } from "lucide-react";
+import { useNavigate, useParams } from "react-router-dom";
+import { useRecipe } from "@/hooks/useRecipes";
+import { RecipeDetail } from "@/components/recipes/RecipeDetail";
+import { Skeleton } from "@/components/ui/Skeleton";
+import { ErrorState } from "@/components/ui/ErrorState";
+import { extractApiError } from "@/api/axiosInstance";
+
+export function RecipeDetailPage() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const recipeId = Number(id);
+  const { data: recipe, isLoading, isError, error, refetch } = useRecipe(recipeId);
+
+  return (
+    <div className="space-y-6">
+      <button type="button" onClick={() => navigate(-1)} className="btn-secondary">
+        <ArrowLeft className="h-4 w-4" />
+        Back
+      </button>
+
+      {isLoading && (
+        <div className="space-y-6">
+          <Skeleton className="h-6 w-24" />
+          <Skeleton className="h-9 w-2/3" />
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <Skeleton key={i} className="h-20" />
+            ))}
+          </div>
+          <Skeleton className="h-64" />
+        </div>
+      )}
+
+      {isError && (
+        <ErrorState
+          message={extractApiError(error, "Failed to load recipe.")}
+          onRetry={() => void refetch()}
+        />
+      )}
+
+      {!isLoading && !isError && recipe && <RecipeDetail recipe={recipe} />}
+    </div>
+  );
+}