OrderStatusTracker

import { OrderStatusTracker } from "@grassroot/ui-react";
 
<OrderStatusTracker steps={["Placed", "Packed", "Shipped", "Delivered"]} current={2} />

<script setup lang="ts">
import { OrderStatusTracker } from "@grassroot/ui-vue";
</script>
 
<template>
  <OrderStatusTracker
    :steps="['Placed', 'Packed', 'Shipped', 'Delivered']"
    :current="2"
  />
</template>

import { Component } from "@angular/core";
import { GrassrootOrderStatusTracker } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootOrderStatusTracker],
  template: `
    <grassroot-order-status-tracker
      [steps]="['Placed', 'Packed', 'Shipped', 'Delivered']"
      [current]="2"
    />
  `,
})
export class ExampleComponent {
}

<script lang="ts">
  import { OrderStatusTracker } from "@grassroot/ui-svelte";
</script>
 
<OrderStatusTracker steps={["Placed", "Packed", "Shipped", "Delivered"]} current={2} />

import { OrderStatusTracker } from "@grassroot/ui-solid";
 
export function Example() {
  return (
    <>
      <OrderStatusTracker steps={["Placed", "Packed", "Shipped", "Delivered"]} current={2} />
    </>
  );
}