576 lines
26 KiB
TypeScript
576 lines
26 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import { Recipe } from '@/lib/recipe-data'
|
|
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Separator } from '@/components/ui/separator'
|
|
import { Progress } from '@/components/ui/progress'
|
|
import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
|
|
import {
|
|
Clock,
|
|
Users,
|
|
ChefHat,
|
|
Lightbulb,
|
|
X,
|
|
Heart,
|
|
Share2,
|
|
Printer,
|
|
Check,
|
|
CheckCircle2,
|
|
PlayCircle,
|
|
Pause,
|
|
RotateCcw,
|
|
Timer
|
|
} from 'lucide-react'
|
|
import Image from 'next/image'
|
|
import { motion, AnimatePresence } from 'framer-motion'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface RecipeDialogProps {
|
|
recipe: Recipe | null
|
|
isOpen: boolean
|
|
onClose: () => void
|
|
}
|
|
|
|
export default function RecipeDialog({ recipe, isOpen, onClose }: RecipeDialogProps) {
|
|
const [activeStep, setActiveStep] = useState(0)
|
|
const [completedSteps, setCompletedSteps] = useState<Set<number>>(new Set())
|
|
const [checkedIngredients, setCheckedIngredients] = useState<Set<number>>(new Set())
|
|
const [isTimerRunning, setIsTimerRunning] = useState(false)
|
|
const [timerTime, setTimerTime] = useState(0)
|
|
const [isFavorited, setIsFavorited] = useState(false)
|
|
const [activeTab, setActiveTab] = useState<'overview' | 'ingredients' | 'instructions' | 'tips'>('overview')
|
|
|
|
// Timer functionality
|
|
useEffect(() => {
|
|
let interval: NodeJS.Timeout
|
|
if (isTimerRunning && timerTime > 0) {
|
|
interval = setInterval(() => {
|
|
setTimerTime(time => {
|
|
if (time <= 1) {
|
|
setIsTimerRunning(false)
|
|
// Could add notification here
|
|
return 0
|
|
}
|
|
return time - 1
|
|
})
|
|
}, 1000)
|
|
}
|
|
return () => clearInterval(interval)
|
|
}, [isTimerRunning, timerTime])
|
|
|
|
// Reset state when dialog opens/closes
|
|
useEffect(() => {
|
|
if (!isOpen) {
|
|
setActiveStep(0)
|
|
setCompletedSteps(new Set())
|
|
setCheckedIngredients(new Set())
|
|
setIsTimerRunning(false)
|
|
setTimerTime(0)
|
|
setActiveTab('overview')
|
|
}
|
|
}, [isOpen])
|
|
|
|
if (!recipe) return null
|
|
|
|
const getDifficultyColor = (difficulty: string) => {
|
|
switch (difficulty) {
|
|
case 'Easy': return 'bg-green-100 text-green-800 border-green-200'
|
|
case 'Medium': return 'bg-yellow-100 text-yellow-800 border-yellow-200'
|
|
case 'Hard': return 'bg-red-100 text-red-800 border-red-200'
|
|
default: return 'bg-gray-100 text-gray-800 border-gray-200'
|
|
}
|
|
}
|
|
|
|
const toggleIngredientCheck = (index: number) => {
|
|
const newChecked = new Set(checkedIngredients)
|
|
if (newChecked.has(index)) {
|
|
newChecked.delete(index)
|
|
} else {
|
|
newChecked.add(index)
|
|
}
|
|
setCheckedIngredients(newChecked)
|
|
}
|
|
|
|
const toggleStepComplete = (index: number) => {
|
|
const newCompleted = new Set(completedSteps)
|
|
if (newCompleted.has(index)) {
|
|
newCompleted.delete(index)
|
|
} else {
|
|
newCompleted.add(index)
|
|
}
|
|
setCompletedSteps(newCompleted)
|
|
}
|
|
|
|
const startTimer = (minutes: number) => {
|
|
setTimerTime(minutes * 60)
|
|
setIsTimerRunning(true)
|
|
}
|
|
|
|
const formatTime = (seconds: number) => {
|
|
const mins = Math.floor(seconds / 60)
|
|
const secs = seconds % 60
|
|
return `${mins}:${secs.toString().padStart(2, '0')}`
|
|
}
|
|
|
|
const progress = recipe.instructions.length > 0 ? (completedSteps.size / recipe.instructions.length) * 100 : 0
|
|
const ingredientProgress = recipe.ingredients.length > 0 ? (checkedIngredients.size / recipe.ingredients.length) * 100 : 0
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
|
<DialogContent className="w-screen h-screen max-w-none max-h-none p-0 rounded-none border-0 bg-white overflow-hidden [&>button]:hidden">
|
|
<VisuallyHidden>
|
|
<DialogTitle>{recipe.name} - Recipe Details</DialogTitle>
|
|
</VisuallyHidden>
|
|
<div className="flex flex-col h-full overflow-hidden">
|
|
{/* Header */}
|
|
<div className="relative flex-shrink-0">
|
|
{/* Hero Image */}
|
|
<div className="relative h-48 sm:h-56 lg:h-64 overflow-hidden">
|
|
<Image
|
|
src={recipe.image}
|
|
alt={recipe.name}
|
|
fill
|
|
className="object-cover"
|
|
sizes="100vw"
|
|
priority
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent" />
|
|
|
|
{/* Close Button */}
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={onClose}
|
|
className="absolute top-4 right-4 bg-black/20 backdrop-blur-sm text-white hover:bg-black/40 rounded-full w-10 h-10"
|
|
>
|
|
<X className="h-5 w-5" />
|
|
</Button>
|
|
|
|
{/* Action Buttons */}
|
|
<div className="absolute top-4 left-4 flex gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => setIsFavorited(!isFavorited)}
|
|
className={cn(
|
|
"bg-black/20 backdrop-blur-sm rounded-full w-10 h-10 transition-colors",
|
|
isFavorited ? "text-red-500 hover:bg-red-500/20" : "text-white hover:bg-black/40"
|
|
)}
|
|
>
|
|
<Heart className={cn("h-5 w-5", isFavorited && "fill-current")} />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="bg-black/20 backdrop-blur-sm text-white hover:bg-black/40 rounded-full w-10 h-10"
|
|
>
|
|
<Share2 className="h-5 w-5" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="bg-black/20 backdrop-blur-sm text-white hover:bg-black/40 rounded-full w-10 h-10"
|
|
>
|
|
<Printer className="h-5 w-5" />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Title Overlay */}
|
|
<div className="absolute bottom-4 left-4 right-4">
|
|
<h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-white mb-1 drop-shadow-lg">
|
|
{recipe.name}
|
|
</h1>
|
|
<p className="text-white/90 text-base sm:text-lg drop-shadow-lg max-w-2xl line-clamp-2">
|
|
{recipe.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Recipe Meta Info */}
|
|
<div className="bg-white border-b border-gray-200 p-4 flex-shrink-0">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="flex flex-wrap gap-4 items-center justify-between mb-3">
|
|
<div className="flex flex-wrap gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<Clock className="w-4 h-4 text-amber-600" />
|
|
<span className="text-sm font-medium">{recipe.cookTime}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Users className="w-4 h-4 text-blue-600" />
|
|
<span className="text-sm font-medium">{recipe.servings} servings</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<ChefHat className="w-4 h-4 text-purple-600" />
|
|
<Badge className={getDifficultyColor(recipe.difficulty)}>
|
|
{recipe.difficulty}
|
|
</Badge>
|
|
</div>
|
|
<Badge variant="outline" className="text-orange-700 border-orange-200 text-xs">
|
|
{recipe.category}
|
|
</Badge>
|
|
</div>
|
|
|
|
{/* Timer */}
|
|
{timerTime > 0 && (
|
|
<div className="flex items-center gap-2 bg-orange-50 px-3 py-1.5 rounded-lg border border-orange-200">
|
|
<Timer className="w-4 h-4 text-orange-600" />
|
|
<span className="font-mono text-sm font-medium text-orange-800">
|
|
{formatTime(timerTime)}
|
|
</span>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setIsTimerRunning(!isTimerRunning)}
|
|
className="p-1 h-auto"
|
|
>
|
|
{isTimerRunning ? <Pause className="w-3 h-3" /> : <PlayCircle className="w-3 h-3" />}
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setTimerTime(0)}
|
|
className="p-1 h-auto"
|
|
>
|
|
<RotateCcw className="w-3 h-3" />
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Progress Bars */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
<div>
|
|
<div className="flex justify-between text-xs text-gray-600 mb-1">
|
|
<span>Ingredients checked</span>
|
|
<span>{checkedIngredients.size}/{recipe.ingredients.length}</span>
|
|
</div>
|
|
<Progress value={ingredientProgress} className="h-1.5" />
|
|
</div>
|
|
<div>
|
|
<div className="flex justify-between text-xs text-gray-600 mb-1">
|
|
<span>Steps completed</span>
|
|
<span>{completedSteps.size}/{recipe.instructions.length}</span>
|
|
</div>
|
|
<Progress value={progress} className="h-1.5" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tab Navigation */}
|
|
<div className="bg-white border-b border-gray-200 flex-shrink-0">
|
|
<div className="max-w-7xl mx-auto px-4">
|
|
<nav className="flex space-x-6">
|
|
{[
|
|
{ id: 'overview', label: 'Overview', icon: ChefHat },
|
|
{ id: 'ingredients', label: 'Ingredients', icon: Check },
|
|
{ id: 'instructions', label: 'Instructions', icon: PlayCircle },
|
|
{ id: 'tips', label: 'Tips', icon: Lightbulb }
|
|
].map(tab => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id as any)}
|
|
className={cn(
|
|
"flex items-center gap-2 py-3 px-1 border-b-2 font-medium text-sm transition-colors",
|
|
activeTab === tab.id
|
|
? "border-orange-500 text-orange-600"
|
|
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
|
|
)}
|
|
>
|
|
<tab.icon className="w-4 h-4" />
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* Main Content */}
|
|
<div className="flex-1 overflow-y-auto recipe-dialog-scroll">
|
|
<div className="max-w-7xl mx-auto p-4">
|
|
<AnimatePresence mode="wait">
|
|
{activeTab === 'overview' && (
|
|
<motion.div
|
|
key="overview"
|
|
initial={{ opacity: 0, x: 20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
exit={{ opacity: 0, x: -20 }}
|
|
transition={{ duration: 0.3 }}
|
|
className="space-y-8"
|
|
>
|
|
{/* Nutrition Info */}
|
|
{recipe.nutritionInfo && (
|
|
<div className="bg-gradient-to-r from-green-50 to-blue-50 rounded-xl p-6 border border-green-100">
|
|
<h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
|
|
<div className="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
|
|
<span className="text-white text-sm font-bold">📊</span>
|
|
</div>
|
|
Nutrition Information (per serving)
|
|
</h3>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
<div className="text-center bg-white rounded-lg p-4 shadow-sm">
|
|
<div className="text-2xl font-bold text-orange-600">{recipe.nutritionInfo.calories}</div>
|
|
<div className="text-gray-600 font-medium">Calories</div>
|
|
</div>
|
|
<div className="text-center bg-white rounded-lg p-4 shadow-sm">
|
|
<div className="text-2xl font-bold text-blue-600">{recipe.nutritionInfo.protein}</div>
|
|
<div className="text-gray-600 font-medium">Protein</div>
|
|
</div>
|
|
<div className="text-center bg-white rounded-lg p-4 shadow-sm">
|
|
<div className="text-2xl font-bold text-green-600">{recipe.nutritionInfo.carbs}</div>
|
|
<div className="text-gray-600 font-medium">Carbs</div>
|
|
</div>
|
|
<div className="text-center bg-white rounded-lg p-4 shadow-sm">
|
|
<div className="text-2xl font-bold text-purple-600">{recipe.nutritionInfo.fat}</div>
|
|
<div className="text-gray-600 font-medium">Fat</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Quick Actions */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => startTimer(5)}
|
|
className="h-20 flex flex-col gap-2 hover:bg-orange-50 hover:border-orange-200"
|
|
>
|
|
<Timer className="w-6 h-6 text-orange-600" />
|
|
<span className="text-sm">5 min timer</span>
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => startTimer(10)}
|
|
className="h-20 flex flex-col gap-2 hover:bg-orange-50 hover:border-orange-200"
|
|
>
|
|
<Timer className="w-6 h-6 text-orange-600" />
|
|
<span className="text-sm">10 min timer</span>
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => startTimer(15)}
|
|
className="h-20 flex flex-col gap-2 hover:bg-orange-50 hover:border-orange-200"
|
|
>
|
|
<Timer className="w-6 h-6 text-orange-600" />
|
|
<span className="text-sm">15 min timer</span>
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setActiveTab('ingredients')}
|
|
className="h-20 flex flex-col gap-2 hover:bg-green-50 hover:border-green-200"
|
|
>
|
|
<Check className="w-6 h-6 text-green-600" />
|
|
<span className="text-sm">Start cooking</span>
|
|
</Button>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
|
|
{activeTab === 'ingredients' && (
|
|
<motion.div
|
|
key="ingredients"
|
|
initial={{ opacity: 0, x: 20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
exit={{ opacity: 0, x: -20 }}
|
|
transition={{ duration: 0.3 }}
|
|
>
|
|
<div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
|
|
<div className="bg-green-50 p-6 border-b border-green-100">
|
|
<h3 className="text-2xl font-bold text-gray-900 flex items-center gap-3">
|
|
<div className="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center">
|
|
<span className="text-white text-lg">🥘</span>
|
|
</div>
|
|
Ingredients
|
|
</h3>
|
|
<p className="text-gray-600 mt-2">Check off ingredients as you gather them</p>
|
|
</div>
|
|
<div className="p-6">
|
|
<div className="space-y-4">
|
|
{recipe.ingredients.map((ingredient, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: index * 0.05 }}
|
|
className={cn(
|
|
"flex items-center gap-4 p-4 rounded-lg border-2 transition-all cursor-pointer hover:shadow-md",
|
|
checkedIngredients.has(index)
|
|
? "bg-green-50 border-green-200 text-green-800"
|
|
: "bg-white border-gray-200 hover:border-gray-300"
|
|
)}
|
|
onClick={() => toggleIngredientCheck(index)}
|
|
>
|
|
<div className={cn(
|
|
"w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all",
|
|
checkedIngredients.has(index)
|
|
? "bg-green-500 border-green-500"
|
|
: "border-gray-300"
|
|
)}>
|
|
{checkedIngredients.has(index) && (
|
|
<Check className="w-4 h-4 text-white" />
|
|
)}
|
|
</div>
|
|
<span className={cn(
|
|
"text-lg leading-relaxed flex-1",
|
|
checkedIngredients.has(index) && "line-through"
|
|
)}>
|
|
{ingredient}
|
|
</span>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
|
|
{activeTab === 'instructions' && (
|
|
<motion.div
|
|
key="instructions"
|
|
initial={{ opacity: 0, x: 20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
exit={{ opacity: 0, x: -20 }}
|
|
transition={{ duration: 0.3 }}
|
|
>
|
|
<div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
|
|
<div className="bg-blue-50 p-6 border-b border-blue-100">
|
|
<h3 className="text-2xl font-bold text-gray-900 flex items-center gap-3">
|
|
<div className="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center">
|
|
<span className="text-white text-lg">📝</span>
|
|
</div>
|
|
Cooking Instructions
|
|
</h3>
|
|
<p className="text-gray-600 mt-2">Follow these steps to create your delicious meal</p>
|
|
</div>
|
|
<div className="p-6">
|
|
<div className="space-y-6">
|
|
{recipe.instructions.map((instruction, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: index * 0.1 }}
|
|
className={cn(
|
|
"flex gap-6 p-6 rounded-xl border-2 transition-all",
|
|
completedSteps.has(index)
|
|
? "bg-green-50 border-green-200"
|
|
: activeStep === index
|
|
? "bg-blue-50 border-blue-200 shadow-lg"
|
|
: "bg-white border-gray-200"
|
|
)}
|
|
>
|
|
<div className="flex flex-col items-center gap-3">
|
|
<button
|
|
onClick={() => toggleStepComplete(index)}
|
|
className={cn(
|
|
"w-12 h-12 rounded-full font-bold text-lg transition-all flex items-center justify-center",
|
|
completedSteps.has(index)
|
|
? "bg-green-500 text-white"
|
|
: activeStep === index
|
|
? "bg-blue-500 text-white"
|
|
: "bg-gray-200 text-gray-600 hover:bg-gray-300"
|
|
)}
|
|
>
|
|
{completedSteps.has(index) ? (
|
|
<CheckCircle2 className="w-6 h-6" />
|
|
) : (
|
|
index + 1
|
|
)}
|
|
</button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setActiveStep(index)}
|
|
className={cn(
|
|
"text-xs",
|
|
activeStep === index ? "text-blue-600" : "text-gray-500"
|
|
)}
|
|
>
|
|
{activeStep === index ? "Current" : "Go to"}
|
|
</Button>
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className={cn(
|
|
"text-lg leading-relaxed",
|
|
completedSteps.has(index) && "line-through text-gray-500"
|
|
)}>
|
|
{instruction}
|
|
</p>
|
|
{index === activeStep && (
|
|
<div className="mt-4 flex gap-2">
|
|
<Button
|
|
size="sm"
|
|
onClick={() => startTimer(5)}
|
|
variant="outline"
|
|
className="text-orange-600 border-orange-200 hover:bg-orange-50"
|
|
>
|
|
<Timer className="w-4 h-4 mr-1" />
|
|
5 min
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
onClick={() => startTimer(10)}
|
|
variant="outline"
|
|
className="text-orange-600 border-orange-200 hover:bg-orange-50"
|
|
>
|
|
<Timer className="w-4 h-4 mr-1" />
|
|
10 min
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
|
|
{activeTab === 'tips' && recipe.tips && recipe.tips.length > 0 && (
|
|
<motion.div
|
|
key="tips"
|
|
initial={{ opacity: 0, x: 20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
exit={{ opacity: 0, x: -20 }}
|
|
transition={{ duration: 0.3 }}
|
|
>
|
|
<div className="bg-gradient-to-r from-yellow-50 to-orange-50 rounded-xl border border-yellow-200 overflow-hidden">
|
|
<div className="bg-yellow-100 p-6 border-b border-yellow-200">
|
|
<h3 className="text-2xl font-bold text-gray-900 flex items-center gap-3">
|
|
<Lightbulb className="w-8 h-8 text-yellow-600" />
|
|
Chef's Tips & Tricks
|
|
</h3>
|
|
<p className="text-gray-600 mt-2">Professional insights to elevate your cooking</p>
|
|
</div>
|
|
<div className="p-6">
|
|
<div className="space-y-4">
|
|
{recipe.tips.map((tip, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: index * 0.1 }}
|
|
className="flex items-start gap-4 p-4 bg-white rounded-lg border border-yellow-200 shadow-sm"
|
|
>
|
|
<span className="text-2xl">💡</span>
|
|
<p className="text-lg leading-relaxed text-gray-700 flex-1">{tip}</p>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|