João Salavisa
3952e35c8d
The section header squeezed the actions toolbar next to the title, so on smaller widths the Workflows toolbar wrapped with its second row left-dangling (Add Workflow floating alone). The header now stacks the actions under the title below sm, protects them from compression by long descriptions, and right-aligns wrapped toolbar rows beside the title. Co-authored-by: Kandev Agent <agent@kandev.dev> Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { IconDownload, IconPlus, IconUpload } from "@tabler/icons-react";
|
|
import { Button } from "@kandev/ui/button";
|
|
import { WorkflowSyncButton } from "@/components/settings/workflow-sync-section";
|
|
|
|
type WorkflowSectionActionsProps = {
|
|
onExport: () => void;
|
|
onImport: () => void;
|
|
onAdd: () => void;
|
|
onGitHubSync: () => void;
|
|
};
|
|
|
|
// WorkflowSectionActions is the toolbar of the Workflows settings section:
|
|
// GitHub Sync, Export All, Import, and Add Workflow.
|
|
export function WorkflowSectionActions({
|
|
onExport,
|
|
onImport,
|
|
onAdd,
|
|
onGitHubSync,
|
|
}: WorkflowSectionActionsProps) {
|
|
return (
|
|
// sm:justify-end keeps wrapped rows right-aligned next to the section
|
|
// title; below sm the toolbar sits under the title, left-aligned.
|
|
<div className="flex flex-wrap gap-2 sm:justify-end">
|
|
<WorkflowSyncButton onClick={onGitHubSync} />
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={onExport}
|
|
className="cursor-pointer"
|
|
>
|
|
<IconDownload className="h-4 w-4 mr-2" />
|
|
Export All
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={onImport}
|
|
className="cursor-pointer"
|
|
>
|
|
<IconUpload className="h-4 w-4 mr-2" />
|
|
Import
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
onClick={onAdd}
|
|
className="cursor-pointer"
|
|
data-testid="add-workflow-button"
|
|
>
|
|
<IconPlus className="h-4 w-4 mr-2" />
|
|
Add Workflow
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|