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) => (
|
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>
|
||||||
|
|
|
||||||
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