Scroll Area

"use client";

import { ScrollArea } from "@/siteplane/components/scroll-area";

const tags = Array.from(
  { length: 50 },
  (_, index) => `v1.2.0-beta.${50 - index}`,
);

export default function Example() {
  return (
    <div className="h-72 w-48 overflow-hidden rounded-lg border">
      <ScrollArea aria-label="Tags">
        <div className="p-4">
          <h3 className="mb-4 font-medium text-sm leading-none">Tags</h3>
          <div className="flex flex-col gap-2">
            {tags.map((tag) => (
              <div className="text-sm" key={tag}>
                {tag}
              </div>
            ))}
          </div>
        </div>
      </ScrollArea>
    </div>
  );
}

"use client";

import { ScrollArea } from "@/siteplane/components/scroll-area";

const activity = [
  {
    id: 1,
    text: "Ben Carter commented on Website redesign",
    time: "2 min ago",
  },
  {
    id: 2,
    text: "Jonas Weber closed Fix invoice rounding",
    time: "14 min ago",
  },
  { id: 3, text: "Priya Shah uploaded brand-guidelines.pdf", time: "1 h ago" },
  { id: 4, text: "Kai Fischer moved Mobile app to Review", time: "2 h ago" },
  { id: 5, text: "Sofia Nguyen invited two teammates", time: "3 h ago" },
  { id: 6, text: "Ben Carter archived Q2 planning", time: "5 h ago" },
  { id: 7, text: "Jonas Weber opened Billing export bug", time: "Yesterday" },
  { id: 8, text: "Priya Shah joined the Design team", time: "Yesterday" },
  { id: 9, text: "Kai Fischer renamed Data migration", time: "2 days ago" },
  {
    id: 10,
    text: "Sofia Nguyen changed the workspace logo",
    time: "3 days ago",
  },
];

export default function Example() {
  return (
    <div className="h-64 w-full max-w-md overflow-hidden rounded-lg border">
      <ScrollArea aria-label="Recent activity" scrollFade>
        <ul className="divide-y px-4">
          {activity.map((item) => (
            <li
              className="flex items-baseline justify-between gap-4 py-3 text-sm"
              key={item.id}
            >
              <span>{item.text}</span>
              <span className="shrink-0 text-muted-foreground text-xs">
                {item.time}
              </span>
            </li>
          ))}
        </ul>
      </ScrollArea>
    </div>
  );
}

"use client";

import { Badge } from "@/siteplane/components/badge";
import { ScrollArea } from "@/siteplane/components/scroll-area";

const topics = [
  "Design",
  "Frontend",
  "Backend",
  "Infrastructure",
  "Research",
  "Billing",
  "Support",
  "Growth",
  "Security",
  "Analytics",
];

export default function Example() {
  return (
    <div className="w-full max-w-96 overflow-hidden rounded-lg border">
      <ScrollArea aria-label="Topics" scrollFade scrollbarGutter>
        <div className="flex w-max gap-2 p-4">
          {topics.map((topic) => (
            <Badge key={topic} variant="outline">
              {topic}
            </Badge>
          ))}
        </div>
      </ScrollArea>
    </div>
  );
}

"use client";

import { ScrollArea } from "@/siteplane/components/scroll-area";

export default function Example() {
  return (
    <div className="h-64 w-full max-w-80 overflow-hidden rounded-lg border">
      <ScrollArea aria-label="Release notes" scrollFade>
        <div className="flex w-[36rem] flex-col gap-3 p-4 text-sm">
          <h3 className="font-medium">Release notes</h3>
          <p>
            Projects can now be archived from the project list. Archived
            projects keep their history and files and can be restored at any
            time by a workspace owner.
          </p>
          <p>
            Invoices include a line for every seat that was active during the
            billing period. Seats added in the middle of a period are charged
            proportionally on the next invoice.
          </p>
          <p>
            Search now matches project descriptions and comments in addition to
            project names. Results are grouped by project and sorted by the most
            recent activity.
          </p>
          <p>
            Workspace owners can require two-factor authentication for all
            members. Members without it are asked to set it up the next time
            they sign in.
          </p>
        </div>
      </ScrollArea>
    </div>
  );
}

"use client";

import { ScrollArea } from "@/siteplane/components/scroll-area";

const projects = [
  { href: "#website-redesign", name: "Website redesign" },
  { href: "#mobile-app", name: "Mobile app" },
  { href: "#data-migration", name: "Data migration" },
  { href: "#customer-portal", name: "Customer portal" },
];

export default function Example() {
  return (
    <div className="flex h-64 w-56 flex-col overflow-hidden rounded-lg border">
      <ScrollArea fill>
        <div className="flex h-full flex-col gap-2 p-2 text-sm">
          <nav aria-label="Projects" className="flex flex-col gap-1">
            {projects.map((project) => (
              <a
                className="rounded-md px-2 py-1.5 hover:bg-accent"
                href={project.href}
                key={project.href}
              >
                {project.name}
              </a>
            ))}
          </nav>
          <footer className="mt-auto border-t px-2 pt-2 text-muted-foreground text-xs">
            4 active projects
          </footer>
        </div>
      </ScrollArea>
    </div>
  );
}