Carlos Florêncio
50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import type { ReactNode } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import { workspaceSettingsTabSpec, type WorkspaceSettingsTab } from "./workspace-settings-shell";
|
|
import { SETTINGS_TYPOGRAPHY } from "../settings-typography";
|
|
|
|
/**
|
|
* The heading every workspace settings tab opens with.
|
|
*
|
|
* The six tabs used to head themselves three different ways: three repeated the
|
|
* workspace's name — already the page title above the strip, so the tab you had
|
|
* just clicked went unnamed — while the rest named the section, only one of them
|
|
* with a mark. This is the shape they now share: the section's name and the mark
|
|
* from its own tab, over a line saying what the section is for.
|
|
*
|
|
* Name and mark come from the tab table rather than from each page, so a page
|
|
* cannot end up calling its section something the tab that opens it does not.
|
|
*/
|
|
export function WorkspaceSectionHeader({
|
|
tab,
|
|
description,
|
|
action,
|
|
}: {
|
|
tab: WorkspaceSettingsTab;
|
|
description: string;
|
|
/** Section-level control, e.g. Automations' "New automation". */
|
|
action?: ReactNode;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const { labelKey, icon: Icon } = workspaceSettingsTabSpec(tab);
|
|
|
|
return (
|
|
<div
|
|
className="flex flex-wrap items-start justify-between gap-4"
|
|
data-testid={`workspace-section-header-${tab}`}
|
|
>
|
|
<div className="min-w-0">
|
|
<h2 className={SETTINGS_TYPOGRAPHY.sectionTitle}>
|
|
<Icon className="h-5 w-5 shrink-0" />
|
|
{t(labelKey)}
|
|
</h2>
|
|
<p className={SETTINGS_TYPOGRAPHY.sectionDescription}>{description}</p>
|
|
</div>
|
|
{action && <div className="w-full shrink-0 md:w-auto">{action}</div>}
|
|
</div>
|
|
);
|
|
}
|