ScrollArea

const scrollAreaFixture = {
  id: "scroll-area",
  items: [
    { name: "ledger-api", latency: "142ms" },
    { name: "billing-worker", latency: "88ms" },
    { name: "edge-gateway", latency: "31ms" },
    { name: "analytics-ingest", latency: "503ms" },
    { name: "scheduler", latency: "61ms" },
    { name: "notify-svc", latency: "44ms" },
  ],
} satisfies { id: string; items: Array<{ name: string; latency: string }> };
 
import { ScrollArea } from "@grassroot/ui-react";
 
export default function ScrollAreaDemo() {
  return (
    <div>
      <ScrollArea maxHeight={168} className="w-full max-w-[340px]">
        {scrollAreaFixture.items.map((item) => (
          <div
            key={item.name}
            className="flex items-center justify-between border-b border-line px-[14px] py-2.5 text-[14px] text-body"
          >
            {item.name}
            <span className="font-mono text-[11.5px] text-muted">{item.latency}</span>
          </div>
        ))}
      </ScrollArea>
    </div>
  );
}

<script setup lang="ts">
const scrollAreaFixture = {
  id: "scroll-area",
  items: [
    { name: "ledger-api", latency: "142ms" },
    { name: "billing-worker", latency: "88ms" },
    { name: "edge-gateway", latency: "31ms" },
    { name: "analytics-ingest", latency: "503ms" },
    { name: "scheduler", latency: "61ms" },
    { name: "notify-svc", latency: "44ms" },
  ],
} satisfies { id: string; items: Array<{ name: string; latency: string }> };
 
import { ScrollArea } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <ScrollArea :max-height="168" class="w-full max-w-[340px]">
      <div
        v-for="item in scrollAreaFixture.items"
        :key="item.name"
        class="flex items-center justify-between border-b border-line px-[14px] py-2.5 text-[14px] text-body"
      >
        {{ item.name }}
        <span class="font-mono text-[11.5px] text-muted">{{ item.latency }}</span>
      </div>
    </ScrollArea>
  </div>
</template>

import { Component } from "@angular/core";
const scrollAreaFixture = {
  id: "scroll-area",
  items: [
    { name: "ledger-api", latency: "142ms" },
    { name: "billing-worker", latency: "88ms" },
    { name: "edge-gateway", latency: "31ms" },
    { name: "analytics-ingest", latency: "503ms" },
    { name: "scheduler", latency: "61ms" },
    { name: "notify-svc", latency: "44ms" },
  ],
} satisfies { id: string; items: Array<{ name: string; latency: string }> };
 
import { GrassrootScrollArea } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-scroll-area-demo",
  standalone: true,
  imports: [GrassrootScrollArea],
  template: `
    <div>
      <grassroot-scroll-area [maxHeight]="168" class="w-full max-w-[340px]">
        @for (item of fixture.items; track item.name) {
          <div
            class="flex items-center justify-between border-b border-line px-[14px] py-2.5 text-[14px] text-body"
          >
            {{ item.name }}
            <span class="font-mono text-[11.5px] text-muted">{{ item.latency }}</span>
          </div>
        }
      </grassroot-scroll-area>
    </div>
  `,
})
export class ScrollAreaDemoComponent {
  protected readonly fixture = scrollAreaFixture;
}
 
export default ScrollAreaDemoComponent;

<script lang="ts">
  import { ScrollArea } from "@grassroot/ui-svelte";
  const scrollAreaFixture = {
    id: "scroll-area",
    items: [
      { name: "ledger-api", latency: "142ms" },
      { name: "billing-worker", latency: "88ms" },
      { name: "edge-gateway", latency: "31ms" },
      { name: "analytics-ingest", latency: "503ms" },
      { name: "scheduler", latency: "61ms" },
      { name: "notify-svc", latency: "44ms" },
    ],
  } satisfies { id: string; items: Array<{ name: string; latency: string }> };
 
  </script>
 
<div>
  <ScrollArea maxHeight={168} className="w-full max-w-[340px]">
    {#each scrollAreaFixture.items as item (item.name)}
      <div
        class="flex items-center justify-between border-b border-line px-[14px] py-2.5 text-[14px] text-body"
      >
        {item.name}
        <span class="font-mono text-[11.5px] text-muted">{item.latency}</span>
      </div>
    {/each}
  </ScrollArea>
</div>

/** @jsxImportSource solid-js */
import { ScrollArea } from "@grassroot/ui-solid";
const scrollAreaFixture = {
  id: "scroll-area",
  items: [
    { name: "ledger-api", latency: "142ms" },
    { name: "billing-worker", latency: "88ms" },
    { name: "edge-gateway", latency: "31ms" },
    { name: "analytics-ingest", latency: "503ms" },
    { name: "scheduler", latency: "61ms" },
    { name: "notify-svc", latency: "44ms" },
  ],
} satisfies { id: string; items: Array<{ name: string; latency: string }> };
 
export default function ScrollAreaDemo() {
  return (
    <div>
      <ScrollArea maxHeight={168} className="w-full max-w-[340px]">
        {scrollAreaFixture.items.map((item) => (
          <div class="flex items-center justify-between border-b border-line px-[14px] py-2.5 text-[14px] text-body">
            {item.name}
            <span class="font-mono text-[11.5px] text-muted">{item.latency}</span>
          </div>
        ))}
      </ScrollArea>
    </div>
  );
}