recipe-app/frontend/src/components/basics/NumberedListItem.tsx
2025-10-21 09:08:08 +02:00

23 lines
No EOL
667 B
TypeScript

type NumberedListItemProps = {
/** Index of the element. Index + 1 is displayed in circle */
index: 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({index, text}: NumberedListItemProps) {
return <li className="flex items-start gap-4">
{/* Step number circle */}
<div className="circular-container">
{index + 1}
</div>
{/* Step text */}
<p className="leading-relaxed">{text}</p>
</li>;
}