From c74295ff8a20b67135fd2f771aa746b80dcd16db Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 18:11:09 +0000 Subject: [PATCH] Add src/app/generate/page.tsx --- src/app/generate/page.tsx | 263 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 263 insertions(+) create mode 100644 src/app/generate/page.tsx diff --git a/src/app/generate/page.tsx b/src/app/generate/page.tsx new file mode 100644 index 0000000..ade45b8 --- /dev/null +++ b/src/app/generate/page.tsx @@ -0,0 +1,263 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline'; +import HeroCentered from '@/components/sections/hero/HeroCentered'; +import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal'; +import { Sparkles, Mail, LogIn } from "lucide-react"; +import { useState } from "react"; + +export default function GeneratePage() { + const [ingredients, setIngredients] = useState([]); + const [currentInput, setCurrentInput] = useState(""); + const [recipes, setRecipes] = useState([]); + const [loading, setLoading] = useState(false); + const [isLoggedIn, setIsLoggedIn] = useState(false); + const [userEmail, setUserEmail] = useState(""); + + const handleGmailLogin = async () => { + try { + // Simulate Gmail OAuth flow + const response = await fetch("/api/auth/gmail", { + method: "POST"}); + if (response.ok) { + const data = await response.json(); + setUserEmail(data.email); + setIsLoggedIn(true); + } + } catch (error) { + console.error("Gmail login failed:", error); + } + }; + + const addIngredient = () => { + if (currentInput.trim()) { + setIngredients([...ingredients, currentInput.trim()]); + setCurrentInput(""); + } + }; + + const removeIngredient = (index: number) => { + setIngredients(ingredients.filter((_, i) => i !== index)); + }; + + const handleKeyPress = (e: React.KeyboardEvent) => { + if (e.key === "Enter") { + e.preventDefault(); + addIngredient(); + } + }; + + const generateRecipes = async () => { + if (ingredients.length === 0) { + alert("Please add at least one ingredient"); + return; + } + + setLoading(true); + try { + const response = await fetch("/api/recipes/generate", { + method: "POST", headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ ingredients }), + }); + + if (response.ok) { + const data = await response.json(); + setRecipes(data.recipes || []); + } + } catch (error) { + console.error("Recipe generation failed:", error); + } finally { + setLoading(false); + } + }; + + return ( + + + +
+ +
+ +
+
+ {/* Login Section */} + {!isLoggedIn && ( +
+

Sign in to Get Started

+ +
+ )} + + {/* Generator Section */} + {isLoggedIn && ( +
+
+

Logged in as: {userEmail}

+
+ + {/* Ingredient Input */} +
+

Add Your Ingredients

+
+ setCurrentInput(e.target.value)} + onKeyPress={handleKeyPress} + placeholder="e.g., chicken, tomatoes, garlic" + className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" + /> + +
+ + {/* Ingredients List */} + {ingredients.length > 0 && ( +
+

Your Ingredients:

+
+ {ingredients.map((ingredient, index) => ( +
+ {ingredient} + +
+ ))} +
+
+ )} + + {/* Generate Button */} + +
+ + {/* Recipes Results */} + {recipes.length > 0 && ( +
+

AI-Generated Recipes

+ {recipes.map((recipe, index) => ( +
+

{recipe.name}

+

+ {recipe.description} +

+
+
Ingredients:
+
    + {recipe.ingredients?.map((ing: string, i: number) => ( +
  • {ing}
    • + ))} +
+
+
+
Instructions:
+

+ {recipe.instructions} +

+
+
+ ⏱ {recipe.cookTime} mins + 👥 Serves {recipe.servings} +
+
+ ))} +
+ )} +
+ )} +
+
+ + + + ); +}