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>;
+}