araemer/recipe-app
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

Add container components

Browse source
This commit is contained in:
araemer 2025-10-25 20:52:16 +02:00
parent b70554db10
commit f867cd3601
10 changed files with 184 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

15
frontend/src/components/recipes/RecipeDetailPage.tsx
View file

@ -10,6 +10,9 @@ import {NumberedListItem} from "../basics/NumberedListItem.tsx";
import {ButtonType} from "../basics/BasicButtonDefinitions.ts";
import StickyHeader from "../basics/StickyHeader.tsx";
import ButtonGroupLayout from "../basics/ButtonGroupLayout.tsx";
import ContentBackground from "../basics/ContentBackground.tsx";
import ContentBody from "../basics/ContentBody.tsx";
import PageContainer from "../basics/PageContainer.tsx";
/**
@ -79,16 +82,16 @@ export default function RecipeDetailPage() {
return (
/*Container spanning entire screen used to center content horizontally */
<div className="app-bg">
<PageContainer>
{/* Container defining the maximum width of the content */}
<div className="content-bg">
<ContentBackground>
{/* Header - remains in position when scrolling */}
<StickyHeader>
<h1>{recipeWorkingCopy.title}</h1>
</StickyHeader>
{/* Content */}
<div className="content-container">
<ContentBody>
{/* Recipe image */}
{recipe.imageUrl && (
<img
@ -153,8 +156,8 @@ export default function RecipeDetailPage() {
text="Zurueck"
/>
</ButtonGroupLayout>
</div>
</div>
</div>
</ContentBody>
</ContentBackground>
</PageContainer>
)
}