Help article

import { Accordion, AccordionItem, Alert, CodeBlock, InlineCode } from "@nexera-ui/react";

const REQUEST = `curl https://api.northwind.io/v2/employees \\
  -H "Authorization: Bearer $NORTHWIND_API_KEY" \\
  -G -d "team=Engineering" -d "status=active"`;

const RESPONSE = `{
  "data": [
    {
      "employee_id": "emp_3RkQ81",
      "name": "Ahmed Raza",
      "team": "Engineering",
      "start_date": "2023-04-03"
    }
  ],
  "next_cursor": "cur_9fJ2"
}`;

const FAQS = [
  {
    q: "How many requests can I make?",
    a: "600 requests a minute per API key. Past the limit you get a 429 response with a Retry-After header in seconds.",
  },
  {
    q: "Can I write data back to Northwind?",
    a: "Yes, with a key that has the employees:write scope. Only workspace admins can create those keys.",
  },
  {
    q: "Do deleted employees appear in the list?",
    a: "No. Add status=all to include people who have left; their records are kept for seven years.",
  },
];

/** Help article: a developer docs page with a code sample, inline code and FAQs. */
export default function HelpArticle() {
  return (
    <div className="@container bg-page px-4 py-8 @3xl:px-8">
      <div className="mx-auto grid max-w-5xl gap-8 @5xl:grid-cols-[12rem_minmax(0,1fr)]">
        <nav aria-label="On this page" className="hidden @5xl:block">
          <ul className="sticky top-4 grid gap-2 text-body-small">
            {[
              ["#list-employees", "List employees"],
              ["#the-response", "The response"],
              ["#questions", "Questions"],
            ].map(([href, label]) => (
              <li key={href}>
                <a
                  href={href}
                  className="text-secondary underline-offset-4 hover:text-brand-text hover:underline"
                >
                  {label}
                </a>
              </li>
            ))}
          </ul>
        </nav>
        <article className="grid min-w-0 gap-6">
          <header className="grid gap-2">
            <p className="text-body-small text-secondary">
              Developers · Employees API · 4 min read
            </p>
            <h2 className="text-heading-h2 text-primary">Sync employees with the Northwind API</h2>
            <p className="text-body-large text-secondary">
              Pull your people directory into payroll, IT or any internal tool with one
              authenticated request.
            </p>
          </header>
          <section className="grid gap-3">
            <h3 id="list-employees" className="text-heading-h3 text-primary">
              List employees
            </h3>
            <p className="text-body-default text-secondary">
              Send a <InlineCode>GET</InlineCode> request to <InlineCode>/v2/employees</InlineCode>{" "}
              with your key in the <InlineCode>Authorization</InlineCode> header. Filter by{" "}
              <InlineCode>team</InlineCode> or <InlineCode>status</InlineCode> to keep responses
              small.
            </p>
            <CodeBlock filename="list-employees.sh" language="Shell" code={REQUEST} />
            <Alert
              tone="warning"
              title="Keep keys out of code"
              description="Store the key in an environment variable such as NORTHWIND_API_KEY, never in your repository."
            />
          </section>
          <section className="grid gap-3">
            <h3 id="the-response" className="text-heading-h3 text-primary">
              The response
            </h3>
            <p className="text-body-default text-secondary">
              Results come 50 at a time. Pass <InlineCode>next_cursor</InlineCode> as{" "}
              <InlineCode>cursor</InlineCode> to get the next page; it is{" "}
              <InlineCode>null</InlineCode> on the last one. The highlighted{" "}
              <InlineCode>employee_id</InlineCode> is the key every other endpoint uses.
            </p>
            <CodeBlock
              filename="response.json"
              language="JSON"
              code={RESPONSE}
              highlightedLines={[4]}
            />
          </section>
          <section className="grid gap-3">
            <h3 id="questions" className="text-heading-h3 text-primary">
              Questions
            </h3>
            <Accordion>
              {FAQS.map((faq) => (
                <AccordionItem key={faq.q} title={faq.q} level={4}>
                  {faq.a}
                </AccordionItem>
              ))}
            </Accordion>
          </section>
        </article>
      </div>
    </div>
  );
}