feat: implement step component (#13)

Author: LeadcodeDev

content/docs/documentation/foundamentals/components/_default.mdx

@@ -11,4 +11,5 @@ collection:
   - text
   - card
   - callout
+  - step
 ---

content/docs/documentation/foundamentals/components/step.mdx

@@ -0,0 +1,52 @@
+---
+title: Step
+description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+permalink: step
+icon: lucide:grid-2x2
+---
+
+# Steps
+
+This section details various processes or features, broken down into a series of manageable steps.
+
+Each `step-group` provides a structured guide, with individual steps offering explanations, instructions, and often code examples to help you achieve a specific goal or understand a particular concept.
+
+Follow the sequence of steps to successfully complete the task.
+
+## Usage
+
+::::step-group
+:::step{title="Lorem ipsum dolor sit amet"}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+```rs [main.rs]
+fn main() {
+    println!("Hello, world!");
+}
+```
+
+:::
+:::step{title="Lorem ipsum dolor sit amet"}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+:::
+::::
+
+````plain [Simple steps]
+::::step-group
+  :::step{title="Lorem ipsum dolor sit amet"}
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+    ```rs [main.rs]
+    fn main() {
+        println!("Hello, world!");
+    }
+    ```
+  :::
+
+  :::step{title="Lorem ipsum dolor sit amet"}
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  :::
+::::
+````

explainer.config.ts

@@ -3,6 +3,8 @@ import CardGroup from "@/components/content/card-group/card-group.astro";
 import Card from "@/components/content/card-group/card.astro";
 import CodeGroup from "@/components/content/code-group/code-group.astro";
 import CodeBlock from "@/components/content/codeblock.astro";
+import StepGroup from "@/components/content/step-group/step-group.astro";
+import Step from "@/components/content/step-group/step.astro";
 import { defineExplainerConfig } from "@/utils";
 
 export default defineExplainerConfig({
@@ -51,6 +53,8 @@ export default defineExplainerConfig({
       "code-group": CodeGroup,
       pre: CodeBlock,
       callout: Callout,
+      "step-group": StepGroup,
+      step: Step,
     },
     icons: {
       markdown: "devicon:markdown",

src/lib/components/content/step-group/step-group.astro

@@ -0,0 +1,7 @@
+---
+
+---
+
+<div class="step-group relative my-8 py-5">
+  <slot />
+</div>

src/lib/components/content/step-group/step.astro

@@ -0,0 +1,49 @@
+---
+import { cn } from "@/utils";
+
+type Props = {
+  title?: string;
+  class?: string;
+};
+const { title, class: className } = Astro.props;
+---
+
+<div class={cn("step relative flex gap-6 pb-8 last:pb-0", className)}>
+  <div
+    class="step-line absolute left-4 top-0 h-full w-px bg-border -translate-x-1/2"
+    aria-hidden="true"
+  >
+  </div>
+  <div
+    class="step-number relative z-10 flex items-center justify-center size-8 bg-secondary rounded-full border border-border text-sm font-semibold text-foreground shrink-0"
+  >
+  </div>
+  <div class="flex-1 min-w-0">
+    {
+      title && (
+        <h3 class="text-lg font-semibold !mt-0 pt-0 mb-3 leading-none text-foreground">
+          {title}
+        </h3>
+      )
+    }
+    <div class="step-content text-muted-foreground [&>p:first-child]:!pt-0">
+      <slot />
+    </div>
+  </div>
+</div>
+
+<style is:global>
+  .step-group {
+    counter-reset: step;
+  }
+</style>
+
+<style>
+  .step {
+    counter-increment: step;
+  }
+
+  .step-number::after {
+    content: counter(step);
+  }
+</style>