Carousel

import { Carousel } from "@grassroot/ui-react";
import * as React from "react";
 
const [index, setIndex] = React.useState(0);
 
<Carousel label="Platform metrics" index={index} onIndexChange={setIndex} loop>
  <div>−42% p95 latency</div>
  <div>99.98% uptime held</div>
  <div>5× scale absorbed</div>
</Carousel>

<script setup lang="ts">
import { ref } from "vue";
import { Carousel } from "@grassroot/ui-vue";
 
const index = ref(0);
</script>
 
<template>
  <Carousel
    v-model:index="index"
    label="Platform metrics"
    loop
  >
    <div>−42% p95 latency</div>
    <div>99.98% uptime held</div>
    <div>5× scale absorbed</div>
  </Carousel>
</template>

import { Component, signal } from "@angular/core";
import { GrassrootCarousel } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootCarousel],
  template: `
    <grassroot-carousel
      label="Platform metrics"
      [index]="index()"
      (indexChange)="index.set($event)"
      [loop]="true"
    >
      <div>−42% p95 latency</div>
      <div>99.98% uptime held</div>
      <div>5× scale absorbed</div>
    </grassroot-carousel>
  `,
})
export class ExampleComponent {
  readonly index = signal(0);
}

<script lang="ts">
  import { Carousel } from "@grassroot/ui-svelte";
 
  let index = $state(0);
</script>
 
<Carousel
  label="Platform metrics"
  index={index}
  onIndexChange={(next) => (index = next)}
  loop
>
  <div>−42% p95 latency</div>
  <div>99.98% uptime held</div>
  <div>5× scale absorbed</div>
</Carousel>

import { createSignal } from "solid-js";
import { Carousel } from "@grassroot/ui-solid";
 
export function Example() {
  const [index, setIndex] = createSignal(0);
 
  return (
    <>
      <Carousel
        label="Platform metrics"
        index={index()}
        onIndexChange={setIndex}
        loop
      >
        <div>−42% p95 latency</div>
        <div>99.98% uptime held</div>
        <div>5× scale absorbed</div>
      </Carousel>
    </>
  );
}