diff --git a/src/components/StepList.astro b/src/components/StepList.astro
index 2d08fb4..3d0a7d7 100644
--- a/src/components/StepList.astro
+++ b/src/components/StepList.astro
@@ -14,7 +14,9 @@ const { steps, currentStep } = Astro.props as {
{
steps.map((step, i) => (
- {i + 1}
+
+ {i + 1}
+
{step.title}
))
@@ -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);
}
}
diff --git a/src/components/StepListReceive.astro b/src/components/StepListReceive.astro
new file mode 100644
index 0000000..c1ecba0
--- /dev/null
+++ b/src/components/StepListReceive.astro
@@ -0,0 +1,15 @@
+---
+import StepList from "./StepList.astro";
+
+const { currentStep } = Astro.props;
+---
+
+