OrderStatusTracker

const orderStatusTrackerFixture = {
  id: "order-status-tracker",
  // current=2 (0-based) puts two steps done, one active, one still upcoming —
  // exercises all three step states plus both connector segments at once.
  steps: ["Placed", "Packed", "Shipped", "Delivered"],
  current: 2,
} satisfies {
  id: string;
  steps: string[];
  current: number;
};
 
import { OrderStatusTracker } from "@grassroot/ui-react";
 
export default function OrderStatusTrackerDemo() {
  return (
    <div>
      <OrderStatusTracker
        steps={orderStatusTrackerFixture.steps}
        current={orderStatusTrackerFixture.current}
      />
    </div>
  );
}

<script setup lang="ts">
const orderStatusTrackerFixture = {
  id: "order-status-tracker",
  // current=2 (0-based) puts two steps done, one active, one still upcoming —
  // exercises all three step states plus both connector segments at once.
  steps: ["Placed", "Packed", "Shipped", "Delivered"],
  current: 2,
} satisfies {
  id: string;
  steps: string[];
  current: number;
};
 
import { OrderStatusTracker } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <OrderStatusTracker
      :steps="orderStatusTrackerFixture.steps"
      :current="orderStatusTrackerFixture.current"
    />
  </div>
</template>

import { Component } from "@angular/core";
const orderStatusTrackerFixture = {
  id: "order-status-tracker",
  // current=2 (0-based) puts two steps done, one active, one still upcoming —
  // exercises all three step states plus both connector segments at once.
  steps: ["Placed", "Packed", "Shipped", "Delivered"],
  current: 2,
} satisfies {
  id: string;
  steps: string[];
  current: number;
};
 
import { GrassrootOrderStatusTracker } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-order-status-tracker-demo",
  standalone: true,
  imports: [GrassrootOrderStatusTracker],
  template: `
    <div>
      <grassroot-order-status-tracker [steps]="fixture.steps" [current]="fixture.current" />
    </div>
  `,
})
export class OrderStatusTrackerDemoComponent {
  protected readonly fixture = orderStatusTrackerFixture;
}
 
export default OrderStatusTrackerDemoComponent;

<script lang="ts">
  import { OrderStatusTracker } from "@grassroot/ui-svelte";
  const orderStatusTrackerFixture = {
    id: "order-status-tracker",
    // current=2 (0-based) puts two steps done, one active, one still upcoming —
    // exercises all three step states plus both connector segments at once.
    steps: ["Placed", "Packed", "Shipped", "Delivered"],
    current: 2,
  } satisfies {
    id: string;
    steps: string[];
    current: number;
  };
 
  </script>
 
<div>
  <OrderStatusTracker
    steps={orderStatusTrackerFixture.steps}
    current={orderStatusTrackerFixture.current}
  />
</div>

/** @jsxImportSource solid-js */
const orderStatusTrackerFixture = {
  id: "order-status-tracker",
  // current=2 (0-based) puts two steps done, one active, one still upcoming —
  // exercises all three step states plus both connector segments at once.
  steps: ["Placed", "Packed", "Shipped", "Delivered"],
  current: 2,
} satisfies {
  id: string;
  steps: string[];
  current: number;
};
 
import { OrderStatusTracker } from "@grassroot/ui-solid";
 
export default function OrderStatusTrackerDemo() {
  return (
    <div>
      <OrderStatusTracker
        steps={orderStatusTrackerFixture.steps}
        current={orderStatusTrackerFixture.current}
      />
    </div>
  );
}