37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import { Stack } from "@phosphor-icons/react";
|
|
import type { SelectionSummary } from "../selectionSummary";
|
|
import { BottomControlDivider } from "./Divider";
|
|
import { bottomControlButtonClass } from "./styles";
|
|
|
|
export type SelectionControlsProps = {
|
|
selection: SelectionSummary;
|
|
onOpenLayers: () => void;
|
|
};
|
|
|
|
export function SelectionControls({ selection, onOpenLayers }: SelectionControlsProps) {
|
|
const label = selectionLabel(selection);
|
|
|
|
return (
|
|
<>
|
|
<button type="button" className={bottomControlButtonClass()} aria-label="Open layers" title="Open layers" onClick={onOpenLayers}>
|
|
<Stack size={16} weight="regular" />
|
|
</button>
|
|
<BottomControlDivider />
|
|
<span className="max-w-48 truncate px-1 text-white">{label}</span>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function selectionLabel(selection: SelectionSummary) {
|
|
switch (selection.type) {
|
|
case "artboard":
|
|
return `${selection.name} · ${selection.layerCount} layers`;
|
|
case "layer":
|
|
return selection.name;
|
|
case "multi-layer":
|
|
return `${selection.count} layers selected`;
|
|
case "none":
|
|
return "";
|
|
}
|
|
}
|