components/panel/panel.react.tsx

Functions

Imports

It imports no other module of this repo. No module of this repo imports it.

Source

1import type { ReactNode, Ref } from "react";
2
3export interface PanelProps {
4  title: ReactNode;
5  // The heading level the page's outline needs: h2 under a page h1, h3 inside a section.
6  level?: 2 | 3;
7  // How many the panel holds, beside the heading: "12".
8  count?: number;
9  // Where the data comes from and how fresh it is: "Cloudflare. Read 6 minutes ago".
10  src?: ReactNode;
11  // A link to the full view, at the right of the header: "All columns in Sites".
12  more?: ReactNode;
13  // shadcn's CardDescription: a muted line under the heading.
14  description?: ReactNode;
15  // Controls that belong to the whole panel, placed after the title.
16  actions?: ReactNode;
17  // A tinted band under the body for the panel's own actions or a link (shadcn's CardFooter).
18  footer?: ReactNode;
19  // "sm" tightens the panel's spacing (shadcn's Card size="sm").
20  size?: "sm";
21  // The heading's id. Given, the panel is wired to its title with aria-labelledby, which
22  // makes the section a named region (a landmark): give it to the panels a person should be
23  // able to jump to, not to all eight on a page.
24  headingId?: string;
25  // The panel's <section>, for focus, scrolling or measuring.
26  ref?: Ref<HTMLElement>;
27  // A list or a table that runs to the panel's edges: the body has no padding.
28  flush?: boolean;
29  id?: string;
30  // The name the anchor bar gives this panel. With an id, the bar links to the panel.
31  section?: string;
32  className?: string;
33  children: ReactNode;
34}
35
36// A panel is a plain <section> with a heading, not a named region, unless it is given a
37// headingId: a page of panels would otherwise fill the landmark list.
38export function Panel({ title, level = 2, count, src, more, description, actions, footer, size, headingId, ref, flush = false, id, section, className, children }: PanelProps) {
39  const Heading = level === 3 ? "h3" : "h2";
40  return (
41    <section ref={ref} className={className ? `cap-panel ${className}` : "cap-panel"} id={id} data-section={section} data-size={size} aria-labelledby={headingId}>
42      <header className="cap-panel-head">
43        <Heading id={headingId}>{title}</Heading>
44        {count != null && <span className="cap-panel-count">{count}</span>}
45        {actions != null && <span className="cap-panel-action">{actions}</span>}
46        {src != null && <span className="cap-panel-src">{src}</span>}
47        {more != null && <span className="cap-panel-more">{more}</span>}
48        {description != null && <p className="cap-panel-desc">{description}</p>}
49      </header>
50      <div className="cap-panel-body" data-flush={flush ? "" : undefined}>
51        {children}
52      </div>
53      {footer != null && <footer className="cap-panel-foot">{footer}</footer>}
54    </section>
55  );
56}