Outline

import { Outline, OutlineItem } from "@/components/ui/outline";

const sections = [
  {
    id: "guide-overview",
    title: "Overview",
    level: 1,
    body: [
      "This guide takes a new project from an empty folder to a deployed site. Each step builds on the one before it, so work through them in order the first time.",
      "Most steps take a few minutes. Deploying takes longer the first time, while the build cache warms up.",
    ],
  },
  {
    id: "guide-installing",
    title: "Installing",
    level: 1,
    body: [
      "Install the command-line tool with your package manager, then sign in. The tool remembers your account, so you only sign in once on each computer.",
      "Run the init command in an empty folder. It asks for a project name and writes a config file with sensible defaults.",
    ],
  },
  {
    id: "guide-configuring",
    title: "Configuring",
    level: 1,
    body: [
      "The config file sets where the site builds from and which commands run. Leave the defaults alone until something needs to change.",
    ],
  },
  {
    id: "guide-environment",
    title: "Environment variables",
    level: 2,
    body: [
      "Keep secrets out of the config file. Add them in the dashboard instead, where each one can differ between preview and production.",
      "A build reads variables when it starts, so redeploy after changing one.",
    ],
  },
  {
    id: "guide-deploying",
    title: "Deploying",
    level: 1,
    body: [
      "Push to the main branch to deploy to production. Every other branch gets a preview address of its own, which updates on each push.",
      "If a deploy fails, its log shows the step that failed and the output just before it.",
    ],
  },
];

export default function OutlineArticle() {
  return (
    <div className="grid w-full max-w-xl grid-cols-1 gap-6 sm:grid-cols-[minmax(0,1fr)_9rem]">
      <article className="h-72 overflow-y-auto rounded-lg border-[0.5px] border-border-muted px-5 pb-5">
        {sections.map((section) => (
          <section key={section.id}>
            <h3
              id={section.id}
              className="mt-5 mb-2 scroll-mt-5 text-sm font-medium text-foreground"
            >
              {section.title}
            </h3>
            {section.body.map((paragraph) => (
              <p key={paragraph} className="mb-3 text-sm text-muted-foreground">
                {paragraph}
              </p>
            ))}
          </section>
        ))}
      </article>
      <Outline label="Contents" className="max-sm:order-first">
        {sections.map((section) => (
          <OutlineItem key={section.id} href={`#${section.id}`} level={section.level === 2 ? 2 : 1}>
            {section.title}
          </OutlineItem>
        ))}
      </Outline>
    </div>
  );
}

import * as React from "react";

import { Outline, OutlineItem } from "@/components/ui/outline";

export default function OutlineLevels() {
  const [value, setValue] = React.useState("color");

  return (
    <Outline aria-label="Design system" value={value} onValueChange={setValue} className="w-48">
      <OutlineItem href="#introduction">Introduction</OutlineItem>
      <OutlineItem href="#foundations">Foundations</OutlineItem>
      <OutlineItem href="#tokens" level={2}>
        Tokens
      </OutlineItem>
      <OutlineItem href="#color" level={3}>
        Color
      </OutlineItem>
      <OutlineItem href="#spacing" level={3}>
        Spacing
      </OutlineItem>
      <OutlineItem href="#typography" level={2}>
        Typography
      </OutlineItem>
      <OutlineItem href="#components">Components</OutlineItem>
    </Outline>
  );
}

import * as React from "react";

import { Button } from "@/components/ui/button";
import { Outline, OutlineItem } from "@/components/ui/outline";

const steps = [
  { value: "summary", title: "Summary" },
  { value: "details", title: "Details" },
  { value: "results", title: "Results" },
  { value: "next-steps", title: "Next steps" },
];

export default function OutlineControlled() {
  const [value, setValue] = React.useState("details");
  const index = steps.findIndex((step) => step.value === value);

  return (
    <div className="flex w-48 flex-col gap-4">
      <Outline aria-label="Report" value={value} onValueChange={setValue}>
        {steps.map((step) => (
          <OutlineItem key={step.value} href={`#${step.value}`}>
            {step.title}
          </OutlineItem>
        ))}
      </Outline>
      <div className="flex gap-2">
        <Button
          variant="secondary"
          size="sm"
          disabled={index === 0}
          onClick={() => setValue(steps[index - 1].value)}
        >
          Previous
        </Button>
        <Button
          variant="secondary"
          size="sm"
          disabled={index === steps.length - 1}
          onClick={() => setValue(steps[index + 1].value)}
        >
          Next
        </Button>
      </div>
    </div>
  );
}