Add container components

frontend/src/components/recipes/RecipeEditor.tsx

@@ -7,6 +7,9 @@ import {InstructionStepListEditor} from "./InstructionStepListEditor"
 import type {InstructionStepModel} from "../../models/InstructionStepModel"
 import {ButtonType} from "../basics/BasicButtonDefinitions"
 import ButtonGroupLayout from "../basics/ButtonGroupLayout.tsx";
+import ContentBackground from "../basics/ContentBackground.tsx";
+import ContentBody from "../basics/ContentBody.tsx";
+import PageContainer from "../basics/PageContainer.tsx";
 
 type RecipeEditorProps = {
     recipe: RecipeModel
@@ -14,12 +17,7 @@ type RecipeEditorProps = {
     onCancel: () => void
 }
 
-/**
- * Editor component for managing a recipe, including title,
- * ingredients (with amount, unit, name), instructions, and image URL.
- * @todo adapt to ingredientGroups!
- */
-export default function RecipeEditor({recipe, onSave, onCancel}: RecipeEditorProps) {
+export function RecipeEditor({recipe, onSave, onCancel}: RecipeEditorProps) {
     /** draft of the new recipe */
     const [draft, setDraft] = useState<RecipeModel>(recipe)
     /** Error list */
@@ -86,14 +84,13 @@ export default function RecipeEditor({recipe, onSave, onCancel}: RecipeEditorPro
     // @todo add handling of images
     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>
                 <h1 className="border-b-2 border-gray-300 pb-4">
                     {recipe.id ? "Rezept bearbeiten" : "Neues Rezept"}
                 </h1>
-                <div className="content-container">
+                <ContentBody>
                     {/* Title */}
                     <h2>Titel</h2>
                     <input
@@ -154,8 +151,8 @@ export default function RecipeEditor({recipe, onSave, onCancel}: RecipeEditorPro
                             text={"Abbrechen"}
                         />
                     </ButtonGroupLayout>
-                </div>
-            </div>
-        </div>
+                </ContentBody>
+            </ContentBackground>
+        </PageContainer>
     )
 }