Extract NumberedListItem

frontend/src/components/basics/NumberedListItem.tsx

@@ -0,0 +1,23 @@
+type NumberedListItemProps = {
+    /** Number to be displayed in front of text */
+    elementNumber: number;
+    /** List item text */
+    text: string;
+}
+
+/**
+ * Numbered list item - the number is displayed in a circle in front of the text
+ * @param elementNumber Number to be displayed
+ * @param text Text to be displayed
+ */
+export function NumberedListItem({elementNumber, text}: NumberedListItemProps) {
+    return <li className="flex items-start gap-4">
+        {/* Step number circle */}
+        <div className="circular-container">
+            {elementNumber}
+        </div>
+
+        {/* Step text */}
+        <p className="leading-relaxed">{text}</p>
+    </li>;
+}

frontend/src/components/recipes/RecipeDetailPage.tsx

@@ -6,6 +6,7 @@ import {getRecipeEditUrl, getRecipeListUrl} from "../../routes"
 import ButtonLink from "../basics/ButtonLink"
 import {mapRecipeDtoToModel} from "../../mappers/RecipeMapper"
 import {NumberStepControl} from "../basics/NumberStepControl.tsx";
+import {NumberedListItem} from "../basics/NumberedListItem.tsx";
 
 
 /**
@@ -131,15 +132,7 @@ export default function RecipeDetailPage() {
                     {/* Instructions - @todo add reasonable list delegate component*/}
                     <ol className="space-y-4">
                         {recipe.instructionStepList.map((step, j) => (
-                            <li key={j} className="flex items-start gap-4">
+                            <NumberedListItem key={j} elementNumber={j + 1} text={step.text}/>
-                                {/* Step number circle */}
-                                <div className="circular-container">
-                                    {j + 1}
-                                </div>
-
-                                {/* Step text */}
-                                <p className="leading-relaxed">{step.text}</p>
-                            </li>
                         ))}
                     </ol>