invented a StepList to show the progress of the setup

This commit is contained in:
Christoph Haas 2025-08-24 16:26:52 +02:00
parent 3c9e901c63
commit a29d2627d6
2 changed files with 24 additions and 8 deletions

View file

@ -14,7 +14,9 @@ const { steps, currentStep } = Astro.props as {
{ {
steps.map((step, i) => ( steps.map((step, i) => (
<li class="step"> <li class="step">
<div class={`circle ${i < currentStep ? "done" : i === currentStep ? "current" : "todo"}`}>{i + 1}</div> <div class={`circle ${i < currentStep - 1 ? "done" : i === currentStep - 1 ? "current" : "todo"}`}>
{i + 1}
</div>
<p class="label">{step.title}</p> <p class="label">{step.title}</p>
</li> </li>
)) ))
@ -27,7 +29,7 @@ const { steps, currentStep } = Astro.props as {
background: #f9fafb; /* light gray */ background: #f9fafb; /* light gray */
border: 1px solid #e5e7eb; /* gray border */ border: 1px solid #e5e7eb; /* gray border */
border-radius: 0.75rem; /* rounded corners */ border-radius: 0.75rem; /* rounded corners */
padding: 1.5rem; padding: 1rem;
max-width: 400px; /* optional, keeps it compact */ max-width: 400px; /* optional, keeps it compact */
} }
@ -37,7 +39,7 @@ const { steps, currentStep } = Astro.props as {
margin: 0; margin: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 0.5rem;
} }
.step { .step {
@ -69,7 +71,7 @@ const { steps, currentStep } = Astro.props as {
background: #3b82f6; /* blue */ background: #3b82f6; /* blue */
border-color: #3b82f6; border-color: #3b82f6;
color: white; color: white;
animation: pulse 1.5s infinite; animation: pulse 2s infinite;
} }
.circle.todo { .circle.todo {
@ -84,12 +86,11 @@ const { steps, currentStep } = Astro.props as {
} }
@keyframes pulse { @keyframes pulse {
0%, 0% {
100% {
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.6); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.6);
} }
50% { 100% {
box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
} }
} }
</style> </style>

View file

@ -0,0 +1,15 @@
---
import StepList from "./StepList.astro";
const { currentStep } = Astro.props;
---
<StepList
steps={[
{ title: "DNS records point to your server" },
{ title: "Postfix fetches information from MariaDB" },
{ title: "Postfix hands over emails to Dovecot" },
{ title: "Dovecot saves the email to disk" },
]}
currentStep={currentStep}
/>