Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | 9x 9x 1x 8x 3x 5x | import NavHeader from '../components/NavHeader'
import RemixModal from '../components/RemixModal'
import { RecipeDetailSkeleton } from '../components/Skeletons'
import { useRecipeDetail } from '../hooks/useRecipeDetail'
import RecipeHeader from './components/RecipeHeader'
import RecipeActions from './components/RecipeActions'
import RecipeTabs from './components/RecipeTabs'
export default function RecipeDetail() {
const {
recipe,
loading,
activeTab,
setActiveTab,
metaExpanded,
setMetaExpanded,
servings,
showRemixModal,
setShowRemixModal,
scaledData,
scalingLoading,
tips,
tipsLoading,
tipsPolling,
profile,
aiStatus,
recipeId,
canShowServingAdjustment,
recipeIsFavorite,
imageUrl,
handleServingChange,
handleGenerateTips,
handleFavoriteToggle,
handleStartCooking,
handleAddToNewCollection,
handleRemixCreated,
handleBack,
} = useRecipeDetail()
if (loading) {
return <RecipeDetailSkeleton />
}
if (!recipe || !profile) {
return (
<div className="flex min-h-screen flex-col items-center justify-center bg-background">
<span className="mb-4 text-muted-foreground">Recipe not found</span>
<button
onClick={handleBack}
className="rounded-lg bg-primary px-4 py-2 text-primary-foreground"
>
Go Back
</button>
</div>
)
}
return (
<div className="min-h-screen bg-background">
<NavHeader />
<RecipeHeader
recipe={recipe}
imageUrl={imageUrl}
metaExpanded={metaExpanded}
setMetaExpanded={setMetaExpanded}
canShowServingAdjustment={canShowServingAdjustment}
servings={servings}
scaledData={scaledData}
scalingLoading={scalingLoading}
onServingChange={handleServingChange}
>
<RecipeActions
recipeId={recipeId}
recipeIsFavorite={recipeIsFavorite}
aiAvailable={aiStatus.available}
onFavoriteToggle={handleFavoriteToggle}
onAddToNewCollection={handleAddToNewCollection}
onShowRemixModal={() => setShowRemixModal(true)}
onStartCooking={handleStartCooking}
/>
</RecipeHeader>
<RecipeTabs
recipe={recipe}
activeTab={activeTab}
setActiveTab={setActiveTab}
scaledData={scaledData}
tips={tips}
tipsLoading={tipsLoading}
tipsPolling={tipsPolling}
aiAvailable={aiStatus.available}
onGenerateTips={handleGenerateTips}
/>
<RemixModal
recipe={recipe}
profileId={profile.id}
isOpen={showRemixModal}
onClose={() => setShowRemixModal(false)}
onRemixCreated={handleRemixCreated}
/>
</div>
)
}
|