invented a StepList to show the progress of the setup
This commit is contained in:
parent
3c9e901c63
commit
a29d2627d6
2 changed files with 24 additions and 8 deletions
|
|
@ -14,7 +14,9 @@ const { steps, currentStep } = Astro.props as {
|
|||
{
|
||||
steps.map((step, i) => (
|
||||
<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>
|
||||
</li>
|
||||
))
|
||||
|
|
@ -27,7 +29,7 @@ const { steps, currentStep } = Astro.props as {
|
|||
background: #f9fafb; /* light gray */
|
||||
border: 1px solid #e5e7eb; /* gray border */
|
||||
border-radius: 0.75rem; /* rounded corners */
|
||||
padding: 1.5rem;
|
||||
padding: 1rem;
|
||||
max-width: 400px; /* optional, keeps it compact */
|
||||
}
|
||||
|
||||
|
|
@ -37,7 +39,7 @@ const { steps, currentStep } = Astro.props as {
|
|||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.step {
|
||||
|
|
@ -69,7 +71,7 @@ const { steps, currentStep } = Astro.props as {
|
|||
background: #3b82f6; /* blue */
|
||||
border-color: #3b82f6;
|
||||
color: white;
|
||||
animation: pulse 1.5s infinite;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.circle.todo {
|
||||
|
|
@ -84,12 +86,11 @@ const { steps, currentStep } = Astro.props as {
|
|||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.6);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 6px rgba(59, 130, 246, 0);
|
||||
100% {
|
||||
box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
15
src/components/StepListReceive.astro
Normal file
15
src/components/StepListReceive.astro
Normal 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}
|
||||
/>
|
||||
Loading…
Add table
Add a link
Reference in a new issue