ScrollArea

'use client';

import { ScrollArea } from '@/components/nxds/components/scroll-area/scroll-area';

const versions = Array.from(
  { length: 40 },
  (_, i) => `v1.4.0-canary.${40 - i}`
);

export default function ScrollAreaVerticalList() {
  return (
    <ScrollArea className="nx:h-72 nx:w-56 nx:rounded-md nx:border-default nx:border-border-default">
      <div className="nx:p-4">
        <h4 className="nx:mb-3 nx:typography-label-default nx:leading-none nx:text-foreground">
          Builds
        </h4>
        <ul className="nx:flex nx:flex-col">
          {versions.map((version) => (
            <li
              key={version}
              className="nx:border-b-default nx:border-border-default nx:py-2 nx:typography-label-default nx:text-foreground nx:last:border-b-0"
            >
              {version}
            </li>
          ))}
        </ul>
      </div>
    </ScrollArea>
  );
}

'use client';

import { ScrollArea, ScrollBar } from '@/components/nxds/components/scroll-area/scroll-area';

const artworks = [
  { title: 'Aurora', artist: 'Ornella Binni' },
  { title: 'Tide', artist: 'Tom Byrom' },
  { title: 'Drift', artist: 'Vladimir Malyavko' },
  { title: 'Ember', artist: 'Mara Stein' },
  { title: 'Quartz', artist: 'Liang Wu' },
  { title: 'Meadow', artist: 'Sofia Russo' },
];

export default function ScrollAreaHorizontalRow() {
  return (
    <ScrollArea className="nx:w-96 nx:rounded-md nx:border-default nx:border-border-default nx:whitespace-nowrap">
      <div className="nx:flex nx:w-max nx:gap-4 nx:p-4">
        {artworks.map((artwork) => (
          <figure key={artwork.title} className="nx:shrink-0">
            <div className="nx:flex nx:h-40 nx:w-32 nx:items-end nx:rounded-md nx:bg-muted nx:p-3">
              <span className="nx:typography-label-default nx:text-foreground">
                {artwork.title}
              </span>
            </div>
            <figcaption className="nx:pt-2 nx:typography-label-small nx:text-muted-foreground">
              by {artwork.artist}
            </figcaption>
          </figure>
        ))}
      </div>
      <ScrollBar orientation="horizontal" />
    </ScrollArea>
  );
}

'use client';

import { ScrollArea, ScrollBar } from '@/components/nxds/components/scroll-area/scroll-area';

export default function ScrollAreaBoth() {
  return (
    <ScrollArea className="nx:h-72 nx:w-96 nx:rounded-md nx:border-default nx:border-border-default">
      <div className="nx:w-max nx:p-4">
        {Array.from({ length: 20 }, (_, row) => (
          <div key={row} className="nx:flex nx:gap-2 nx:py-1">
            {Array.from({ length: 15 }, (_, col) => (
              <div
                key={col}
                className="nx:flex nx:size-12 nx:shrink-0 nx:items-center nx:justify-center nx:rounded-sm nx:bg-muted nx:typography-label-small nx:text-muted-foreground"
              >
                {row * 15 + col}
              </div>
            ))}
          </div>
        ))}
      </div>
      <ScrollBar orientation="horizontal" />
    </ScrollArea>
  );
}

'use client';

import { ScrollArea, ScrollBar } from '@/components/nxds/components/scroll-area/scroll-area';

const jobRuns = Array.from({ length: 28 }, (_, i) => ({
  id: `run-${4820 - i}`,
  branch: ['main', 'release/vega', 'codex/ui-polish', 'docs/mwg'][i % 4],
  owner: ['Mira', 'Omar', 'Jules', 'Nia'][i % 4],
  duration: `${3 + (i % 9)}m ${10 + ((i * 7) % 50)}s`,
  status: ['Passed', 'Queued', 'Reviewing', 'Blocked'][i % 4],
}));

export default function ScrollAreaVisibleAffordance() {
  return (
    <ScrollArea
      type="always"
      className="nx:h-64 nx:w-80 nx:rounded-md nx:border-default nx:border-border-default"
    >
      <div className="nx:w-max nx:p-4">
        <div className="nx:grid nx:grid-cols-[112px_160px_96px_96px_96px] nx:gap-x-4 nx:border-b-default nx:border-border-default nx:pb-2 nx:typography-label-small nx:text-muted-foreground">
          <span>Run</span>
          <span>Branch</span>
          <span>Owner</span>
          <span>Duration</span>
          <span>Status</span>
        </div>
        <div className="nx:flex nx:flex-col">
          {jobRuns.map((run) => (
            <div
              key={run.id}
              className="nx:grid nx:grid-cols-[112px_160px_96px_96px_96px] nx:gap-x-4 nx:border-b-default nx:border-border-default nx:py-2 nx:typography-label-default nx:text-foreground nx:last:border-b-0"
            >
              <span className="nx:font-mono nx:typography-label-small">
                {run.id}
              </span>
              <span>{run.branch}</span>
              <span>{run.owner}</span>
              <span>{run.duration}</span>
              <span>{run.status}</span>
            </div>
          ))}
        </div>
      </div>
      <ScrollBar orientation="horizontal" />
    </ScrollArea>
  );
}

'use client';

import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from '@/components/nxds/components/card/card';
import { ScrollArea } from '@/components/nxds/components/scroll-area/scroll-area';

const versions = Array.from(
  { length: 40 },
  (_, i) => `v1.4.0-canary.${40 - i}`
);

export default function ScrollAreaInCard() {
  return (
    <Card className="nx:w-80">
      <CardHeader>
        <CardTitle>Builds</CardTitle>
      </CardHeader>
      <CardContent>
        <ScrollArea className="nx:h-48 nx:rounded-md nx:border-default nx:border-border-default">
          <ul className="nx:flex nx:flex-col nx:p-3">
            {versions.map((version) => (
              <li
                key={version}
                className="nx:border-b-default nx:border-border-default nx:py-2 nx:typography-label-default nx:text-container-foreground nx:last:border-b-0"
              >
                {version}
              </li>
            ))}
          </ul>
        </ScrollArea>
      </CardContent>
    </Card>
  );
}

<script setup lang="ts">
import { ScrollArea } from '@/components/scroll-area';

const versions = Array.from(
  { length: 40 },
  (_, i) => `v1.4.0-canary.${40 - i}`
);
</script>

<template>
  <ScrollArea
    class="nx:h-72 nx:w-56 nx:rounded-md nx:border-default nx:border-border-default"
  >
    <div class="nx:p-4">
      <h4
        class="nx:mb-3 nx:typography-label-default nx:leading-none nx:text-foreground"
      >
        Builds
      </h4>
      <ul class="nx:flex nx:flex-col">
        <li
          v-for="version in versions"
          :key="version"
          class="nx:border-b-default nx:border-border-default nx:py-2 nx:typography-label-default nx:text-foreground nx:last:border-b-0"
        >
          {{ version }}
        </li>
      </ul>
    </div>
  </ScrollArea>
</template>

<script setup lang="ts">
import { ScrollArea, ScrollBar } from '@/components/scroll-area';

const artworks = [
  { title: 'Aurora', artist: 'Ornella Binni' },
  { title: 'Tide', artist: 'Tom Byrom' },
  { title: 'Drift', artist: 'Vladimir Malyavko' },
  { title: 'Ember', artist: 'Mara Stein' },
  { title: 'Quartz', artist: 'Liang Wu' },
  { title: 'Meadow', artist: 'Sofia Russo' },
];
</script>

<template>
  <ScrollArea
    class="nx:w-96 nx:rounded-md nx:border-default nx:border-border-default nx:whitespace-nowrap"
  >
    <div class="nx:flex nx:w-max nx:gap-4 nx:p-4">
      <figure
        v-for="artwork in artworks"
        :key="artwork.title"
        class="nx:shrink-0"
      >
        <div
          class="nx:flex nx:h-40 nx:w-32 nx:items-end nx:rounded-md nx:bg-muted nx:p-3"
        >
          <span class="nx:typography-label-default nx:text-foreground">{{
            artwork.title
          }}</span>
        </div>
        <figcaption
          class="nx:pt-2 nx:typography-label-small nx:text-muted-foreground"
        >
          by {{ artwork.artist }}
        </figcaption>
      </figure>
    </div>
    <ScrollBar orientation="horizontal" />
  </ScrollArea>
</template>

<script setup lang="ts">
import { ScrollArea, ScrollBar } from '@/components/scroll-area';
</script>

<template>
  <ScrollArea
    class="nx:h-72 nx:w-96 nx:rounded-md nx:border-default nx:border-border-default"
  >
    <div class="nx:w-max nx:p-4">
      <div v-for="row in 20" :key="row" class="nx:flex nx:gap-2 nx:py-1">
        <div
          v-for="col in 15"
          :key="col"
          class="nx:flex nx:size-12 nx:shrink-0 nx:items-center nx:justify-center nx:rounded-sm nx:bg-muted nx:typography-label-small nx:text-muted-foreground"
        >
          {{ (row - 1) * 15 + col - 1 }}
        </div>
      </div>
    </div>
    <ScrollBar orientation="horizontal" />
  </ScrollArea>
</template>

<script setup lang="ts">
import { ScrollArea, ScrollBar } from '@/components/scroll-area';

const runs = Array.from({ length: 28 }, (_, i) => ({
  id: `run-${4820 - i}`,
  branch: ['main', 'release/vega', 'codex/ui-polish', 'docs/mwg'][i % 4],
  owner: ['Mira', 'Omar', 'Jules', 'Nia'][i % 4],
  duration: `${3 + (i % 9)}m ${10 + ((i * 7) % 50)}s`,
  status: ['Passed', 'Queued', 'Reviewing', 'Blocked'][i % 4],
}));
</script>

<template>
  <ScrollArea
    type="always"
    class="nx:h-64 nx:w-80 nx:rounded-md nx:border-default nx:border-border-default"
  >
    <div class="nx:w-max nx:p-4">
      <div
        class="nx:grid nx:grid-cols-[112px_160px_96px_96px_96px] nx:gap-x-4 nx:border-b-default nx:border-border-default nx:pb-2 nx:typography-label-small nx:text-muted-foreground"
      >
        <span>Run</span>
        <span>Branch</span>
        <span>Owner</span>
        <span>Duration</span>
        <span>Status</span>
      </div>
      <div class="nx:flex nx:flex-col">
        <div
          v-for="run in runs"
          :key="run.id"
          class="nx:grid nx:grid-cols-[112px_160px_96px_96px_96px] nx:gap-x-4 nx:border-b-default nx:border-border-default nx:py-2 nx:typography-label-default nx:text-foreground nx:last:border-b-0"
        >
          <span class="nx:font-mono nx:typography-label-small">{{
            run.id
          }}</span>
          <span>{{ run.branch }}</span>
          <span>{{ run.owner }}</span>
          <span>{{ run.duration }}</span>
          <span>{{ run.status }}</span>
        </div>
      </div>
    </div>
    <ScrollBar orientation="horizontal" />
  </ScrollArea>
</template>

<script setup lang="ts">
import { Card, CardContent, CardHeader, CardTitle } from '@/components/card';
import { ScrollArea } from '@/components/scroll-area';

const versions = Array.from(
  { length: 40 },
  (_, i) => `v1.4.0-canary.${40 - i}`
);
</script>

<template>
  <Card class="nx:w-80">
    <CardHeader>
      <CardTitle>Builds</CardTitle>
    </CardHeader>
    <CardContent>
      <ScrollArea
        class="nx:h-48 nx:rounded-md nx:border-default nx:border-border-default"
      >
        <ul class="nx:flex nx:flex-col nx:p-3">
          <li
            v-for="version in versions"
            :key="version"
            class="nx:border-b-default nx:border-border-default nx:py-2 nx:typography-label-default nx:text-container-foreground nx:last:border-b-0"
          >
            {{ version }}
          </li>
        </ul>
      </ScrollArea>
    </CardContent>
  </Card>
</template>