Scroll area

TS

import { … } from "@fungi.computer/caps/components/scroll-area";

Hero

TSX

import { ScrollArea } from "@fungi.computer/caps/components/scroll-area";

export default function Hero() {
  return (
    <ScrollArea aria-label="Foraging log" className="h-32 w-72">
      <div className="grid gap-sm p-sm">
        {Array.from({ length: 12 }, (_, index) => (
          <p className="text-sm" key={index}>
            Entry {index + 1}: logged a new mushroom sighting.
          </p>
        ))}
      </div>
    </ScrollArea>
  );
}

Surface and screen

TSX

import { ScrollArea } from "@fungi.computer/caps/components/scroll-area";

export default function SurfaceAndScreen() {
  return (
    <div className="flex gap-lg">
      <ScrollArea surface className="h-28 w-40" aria-label="Surface">
        <div className="grid gap-xs p-sm">
          {Array.from({ length: 8 }, (_, i) => (
            <p className="text-sm" key={i}>
              Jar {i + 1}
            </p>
          ))}
        </div>
      </ScrollArea>
      <ScrollArea surface screen className="h-28 w-40" aria-label="Screen">
        <div className="grid gap-xs p-sm">
          {Array.from({ length: 8 }, (_, i) => (
            <p className="text-sm" key={i}>
              Rack {i + 1}
            </p>
          ))}
        </div>
      </ScrollArea>
    </div>
  );
}

Load more

TSX

import { Button } from "@fungi.computer/caps/components/button";
import { ScrollArea } from "@fungi.computer/caps/components/scroll-area";
import { useState } from "react";

export default function LoadMore() {
  const [count, setCount] = useState(4);
  return (
    <div className="grid max-w-sm gap-sm">
      <Button
        size="sm"
        onClick={() => {
          setCount((value) => value + 6);
        }}
      >
        Load more entries
      </Button>
      <ScrollArea aria-label="Foraging log" className="h-32">
        <div className="grid gap-sm p-sm">
          {Array.from({ length: count }, (_, index) => (
            <p className="text-sm" key={index}>
              Entry {index + 1}
            </p>
          ))}
        </div>
      </ScrollArea>
    </div>
  );
}