add title to StepList

This commit is contained in:
Christoph Haas 2025-08-24 18:54:24 +02:00
parent 6de9d4f6c7
commit 3a5508cdb5
2 changed files with 11 additions and 2 deletions

View file

@ -3,13 +3,15 @@ interface Step {
title: string;
}
const { steps, currentStep } = Astro.props as {
const { steps, currentStep, title } = Astro.props as {
steps: Step[];
currentStep: number;
title: String;
};
---
<div class="step-box">
<h2>{title}</h2>
<ol class="steps">
{
steps.map((step, i) => (
@ -33,6 +35,11 @@ const { steps, currentStep } = Astro.props as {
max-width: 400px; /* optional, keeps it compact */
}
.step-box h2 {
font-size: 1em;
padding-bottom: 1em;
}
.steps {
list-style: none;
padding: 0;

View file

@ -1,12 +1,14 @@
---
import StepList from "./StepList.astro";
const { currentStep } = Astro.props;
const { currentStep, title } = Astro.props;
---
<StepList
title="Todo list for receiving emails"
steps={[
{ title: "DNS records point to your server" },
{ title: "Get a certificate from Let's Encrypt" },
{ title: "Postfix fetches information from MariaDB" },
{ title: "Postfix hands over emails to Dovecot" },
{ title: "Dovecot saves the email to disk" },