app/components/admin/media-display-group.tsx

Functions

Imports

It imports app/components/admin/tab-link.tsx. Imported by app/components/admin/media-display-bar.tsx.

Source

1import { TabsNav } from "capsomer/react/tabs";
2
3import { TabLink } from "~/components/admin/tab-link";
4
5// Links, not a select: each option is a URL, so display state is shareable and works with no script.
6export function MediaDisplayGroup({
7  label,
8  options,
9  current,
10  hrefFor,
11}: {
12  label: string;
13  options: Array<[string, string]>;
14  current: string;
15  hrefFor: (id: string) => string;
16}) {
17  return (
18    <div className="cap-field">
19      <span className="cap-field-label">{label}</span>
20      <TabsNav aria-label={label} size="sm">
21        {options.map(([id, text]) => (
22          <TabLink key={id} to={hrefFor(id)} current={current === id}>
23            {text}
24          </TabLink>
25        ))}
26      </TabsNav>
27    </div>
28  );
29}