Add container components

frontend/src/App.css

@@ -39,9 +39,4 @@
         @apply text-sm text-red-600;
     }
 
-    /* containers */
-    .highlight-container-bg {
-        @apply bg-gray-200 rounded p-2;
-    }
-
 }

frontend/src/components/basics/BoxContainer.tsx

@@ -0,0 +1,26 @@
+import clsx from "clsx";
+import React, {type ReactNode} from "react";
+
+type BoxContainerProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Content to render inside the container */
+    children: ReactNode;
+};
+
+/**
+ * Box Container for highlighting content
+ *
+ * Accepts any div attributes (e.g. `className`, `title`, `onClick`, or DnD listeners).
+ */
+export function BoxContainer({children, className, ...rest}: BoxContainerProps) {
+    return (
+        <div
+            {...rest}
+            className={clsx(
+                "bg-gray-200 rounded p-2",
+                className
+            )}
+        >
+            {children}
+        </div>
+    );
+}

frontend/src/components/basics/ButtonGroupLayout.tsx

@@ -1,23 +1,22 @@
-import type {ReactNode} from "react";
+import React, {type ReactNode} from "react";
 import clsx from "clsx";
 
-type ButtonGroupLayoutProps = {
+type ButtonGroupLayoutProps = React.HTMLAttributes<HTMLDivElement> & {
     /** Content to render inside the header */
     children: ReactNode;
-
-    /** Optional additional Tailwind classes */
-    className?: string;
 };
 
 /**
  * A layout for horizontally aligning buttons as usually a save button is accompanied by a cancel button
  * @param children Children of the layout, i.e., buttons
  * @param className Optional additional styles
+ * @param props all other props by html div that might be needed
  * @constructor
  */
-export default function ButtonGroupLayout({children, className = ""}: ButtonGroupLayoutProps) {
+export default function ButtonGroupLayout({children, className, ...rest}: ButtonGroupLayoutProps) {
     return (
         <div
+            {...rest}
             className={clsx(
                 "flex gap-4 mt-8",
                 className

frontend/src/components/basics/ContentBackground.tsx

@@ -1,24 +1,23 @@
-import type {ReactNode} from "react";
+import React, {type ReactNode} from "react";
 import clsx from "clsx";
 
-type ContentBackgroundProps = {
+type ContentBackgroundProps = React.HTMLAttributes<HTMLDivElement> & {
     /** Content to render inside the container */
     children: ReactNode;
-
-    /** Optional additional Tailwind classes */
-    className?: string;
 };
 
 /**
  * Background for the content area of a page
  * @param children Children the page, i.e., header and body
  * @param className Optional additional styles
+ * @param props all other props by html div that might be needed
  * @see ContentBody.tsx
  * @constructor
  */
-export default function ContentBackground({children, className = ""}: ContentBackgroundProps) {
+export default function ContentBackground({children, className, ...props}: ContentBackgroundProps) {
     return (
         <div
+            {...props}
             className={clsx(
                 "bg-gray-100 w-full min-h-screen max-w-6xl shadow-xl p-8",
                 className

frontend/src/components/basics/ContentBody.tsx

@@ -1,23 +1,22 @@
-import {type ReactNode} from "react";
+import React, {type ReactNode} from "react";
 import clsx from "clsx";
 
-type ContentBodyProps = {
+type ContentBodyProps = React.HTMLAttributes<HTMLDivElement> & {
     /** Content to render inside the container */
     children: ReactNode;
-
-    /** Optional additional Tailwind classes */
-    className?: string;
 };
 
 /**
  * Body for the content area of a page
  * @param children Children the page, i.e., header and body
  * @param className Optional additional styles
+ * @param props all other props by html div that might be needed
  * @constructor
  */
-export default function ContentBody({children, className = ""}: ContentBodyProps) {
+export default function ContentBody({children, className, ...props}: ContentBodyProps) {
     return (
         <div
+            {...props}
             className={clsx(
                 "p-6 max-w-2xl mx-auto",
                 className

frontend/src/components/basics/HorizontalInputGroupLayout.tsx

@@ -1,23 +1,22 @@
-import type {ReactNode} from "react";
+import React, {type ReactNode} from "react";
 import clsx from "clsx";
 
-type HorizontalInputGroupLayoutProps = {
+type HorizontalInputGroupLayoutProps = React.HTMLAttributes<HTMLDivElement> & {
     /** Content to render inside the group */
     children: ReactNode;
-
-    /** Optional additional Tailwind classes */
-    className?: string;
 };
 
 /**
  * A layout for horizontally aligning inputs and buttons - designed for pages with several input items in a row
  * @param children Children of the layout, i.e., inputs
  * @param className Optional additional styles
+ * @param props all other props by html div that might be needed
  * @constructor
  */
-export default function HorizontalInputGroupLayout({children, className = ""}: HorizontalInputGroupLayoutProps) {
+export default function HorizontalInputGroupLayout({children, className, ...props}: HorizontalInputGroupLayoutProps) {
     return (
         <div
+            {...props}
             className={clsx(
                 "flex gap-2 mb-2 items-center",
                 className

frontend/src/components/basics/PageContainer.tsx

@@ -1,23 +1,22 @@
-import {type ReactNode} from "react";
+import React, {type ReactNode} from "react";
 import clsx from "clsx";
 
-type PageContainerProps = {
+type PageContainerProps = React.HTMLAttributes<HTMLDivElement> & {
     /** Content to render inside the container */
     children: ReactNode;
-
-    /** Optional additional Tailwind classes */
-    className?: string;
 };
 
 /**
  * Container for a page providing the correct dimensions to its children
  * @param children Children the page, i.e., header and body
  * @param className Optional additional styles
+ * @param props all other props by html div that might be needed
  * @constructor
  */
-export default function PageContainer({children, className = ""}: PageContainerProps): ReactNode {
+export default function PageContainer({children, className, ...rest}: PageContainerProps): ReactNode {
     return (
         <div
+            {...rest}
             className={clsx(
                 "flex items-center w-screen justify-center min-h-screen ;",
                 className

frontend/src/components/recipes/RecipeDetailPage.tsx

@@ -13,6 +13,7 @@ import ButtonGroupLayout from "../basics/ButtonGroupLayout.tsx";
 import ContentBackground from "../basics/ContentBackground.tsx";
 import ContentBody from "../basics/ContentBody.tsx";
 import PageContainer from "../basics/PageContainer.tsx";
+import {BoxContainer} from "../basics/BoxContainer.tsx";
 
 
 /**
@@ -102,8 +103,8 @@ export default function RecipeDetailPage() {
                     )}
 
                     {/* Servings */}
-                    <div
+                    <BoxContainer
-                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 highlight-container-bg mb-4">
+                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4">
                         <p>
                             Für {recipeWorkingCopy.servings.amount} {recipeWorkingCopy.servings.unit}
                         </p>
@@ -114,7 +115,7 @@ export default function RecipeDetailPage() {
                             min={1}
                             className="justify-end sm:justify-center"
                         />
-                    </div>
+                    </BoxContainer>
 
                     {/* Ingredients */}
                     <h2>Zutaten</h2>