Scroll Area

import { Fragment } from "react"

import { ScrollArea } from "@/components/ui/scroll-area"
import { Separator } from "@/components/ui/separator"

const releases = Array.from({ length: 40 }, (_, i) => `v1.${40 - i}.0`)

export default function ScrollAreaDemo() {
  return (
    <ScrollArea className="h-64 w-48 rounded-xl border bg-card shadow-raised">
      <div className="p-4">
        <p className="mb-3 text-sm font-semibold text-foreground">Releases</p>
        {releases.map((release, index) => (
          <Fragment key={release}>
            {index > 0 && <Separator className="my-2" />}
            <div className="font-mono text-code text-muted-foreground">
              {release}
            </div>
          </Fragment>
        ))}
      </div>
    </ScrollArea>
  )
}

import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"

const works = [
  { title: "Meridian", artist: "Ola Nowak" },
  { title: "Low Tide", artist: "Jonas Berg" },
  { title: "Ember", artist: "Maya Chen" },
  { title: "Field Notes", artist: "Iris Vale" },
  { title: "Nocturne", artist: "Theo Park" },
  { title: "Bloom", artist: "Lena Roth" },
]

export default function ScrollAreaHorizontal() {
  return (
    <ScrollArea className="w-full max-w-lg rounded-xl border bg-card">
      <div className="flex w-max gap-4 p-4">
        {works.map((work) => (
          <figure
            key={work.title}
            className="flex w-40 shrink-0 flex-col gap-2"
          >
            <div className="aspect-[3/4] rounded-lg bg-muted" />
            <figcaption className="flex flex-col">
              <span className="text-sm font-medium text-foreground">
                {work.title}
              </span>
              <span className="text-xs text-muted-foreground">
                {work.artist}
              </span>
            </figcaption>
          </figure>
        ))}
      </div>
      <ScrollBar orientation="horizontal" />
    </ScrollArea>
  )
}

import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"

const months = [
  "Jan",
  "Feb",
  "Mar",
  "Apr",
  "May",
  "Jun",
  "Jul",
  "Aug",
  "Sep",
  "Oct",
  "Nov",
  "Dec",
]
const regions = [
  "North America",
  "South America",
  "Western Europe",
  "Central Europe",
  "Nordics",
  "Middle East",
  "Africa",
  "South Asia",
  "East Asia",
  "Oceania",
]

function value(row: number, col: number) {
  return (((row + 3) * (col + 7) * 37) % 900) + 100
}

export default function ScrollAreaBothAxes() {
  return (
    <ScrollArea className="h-72 w-full max-w-lg rounded-xl border bg-card shadow-raised">
      <table className="w-max border-collapse text-sm numeric">
        <thead className="sticky top-0 z-raised bg-surface">
          <tr className="border-b">
            <th
              scope="col"
              className="sticky left-0 z-raised bg-surface px-4 py-2.5 text-left text-xs font-medium text-muted-foreground"
            >
              Region
            </th>
            {months.map((month) => (
              <th
                key={month}
                scope="col"
                className="px-4 py-2.5 text-right text-xs font-medium text-muted-foreground"
              >
                {month}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {regions.map((region, row) => (
            <tr key={region} className="border-b last:border-0">
              <td className="sticky left-0 bg-card px-4 py-2.5 whitespace-nowrap text-foreground">
                {region}
              </td>
              {months.map((month, col) => (
                <td
                  key={month}
                  className="px-4 py-2.5 text-right text-muted-foreground"
                >
                  {value(row, col).toLocaleString("en-US")}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
      <ScrollBar orientation="horizontal" />
    </ScrollArea>
  )
}

import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { ScrollArea } from "@/components/ui/scroll-area"
import { cn } from "@/lib/utils"

const activity = [
  {
    who: "AK",
    name: "Ana Kowalska",
    what: "merged #482 into main",
    when: "2m",
  },
  {
    who: "JB",
    name: "Jonas Berg",
    what: "commented on Tokens v2",
    when: "14m",
  },
  {
    who: "MC",
    name: "Maya Chen",
    what: "opened Dialog focus trap bug",
    when: "1h",
  },
  { who: "TP", name: "Theo Park", what: "released v1.4.0", when: "3h" },
  {
    who: "IV",
    name: "Iris Vale",
    what: "invited 3 people to Design",
    when: "5h",
  },
  { who: "LR", name: "Lena Roth", what: "archived Legacy icons", when: "1d" },
  {
    who: "OS",
    name: "Omar Said",
    what: "updated the contrast tests",
    when: "1d",
  },
  { who: "AK", name: "Ana Kowalska", what: "approved #479", when: "2d" },
]

const fade =
  "before:pointer-events-none before:absolute before:inset-x-0 before:right-2.5 before:top-0 before:z-raised before:h-10 before:rounded-t-xl before:bg-linear-to-b before:from-card before:to-transparent before:opacity-0 before:transition-opacity before:duration-base data-overflow-y-start:before:opacity-100 " +
  "after:pointer-events-none after:absolute after:inset-x-0 after:right-2.5 after:bottom-0 after:z-raised after:h-10 after:rounded-b-xl after:bg-linear-to-t after:from-card after:to-transparent after:opacity-0 after:transition-opacity after:duration-base data-overflow-y-end:after:opacity-100"

export default function ScrollAreaFadeEdges() {
  return (
    <ScrollArea
      className={cn(
        "h-72 w-full max-w-sm rounded-xl border bg-card shadow-raised",
        fade
      )}
    >
      <ul className="flex flex-col p-2">
        {activity.map((item, index) => (
          <li
            key={index}
            className="flex items-center gap-3 rounded-lg px-2 py-2.5"
          >
            <Avatar size="sm">
              <AvatarFallback>{item.who}</AvatarFallback>
            </Avatar>
            <p className="min-w-0 flex-1 truncate text-sm text-muted-foreground">
              <span className="font-medium text-foreground">{item.name}</span>{" "}
              {item.what}
            </p>
            <span className="text-xs text-muted-foreground numeric">
              {item.when}
            </span>
          </li>
        ))}
      </ul>
    </ScrollArea>
  )
}