29 lines
1.2 KiB
TypeScript
29 lines
1.2 KiB
TypeScript
import { BoundingBox } from "@phosphor-icons/react";
|
|
import type { Rect } from "@core/geometry";
|
|
import { BottomControlDivider } from "./Divider";
|
|
import { bottomControlIconSlotClass, bottomControlLabelClass, bottomControlValueClass } from "./styles";
|
|
|
|
export type TransformControlsProps = {
|
|
bounds: Rect;
|
|
};
|
|
|
|
export function TransformControls({ bounds }: TransformControlsProps) {
|
|
return (
|
|
<div className="flex w-full items-center justify-center gap-2 tabular-nums">
|
|
<span className={bottomControlIconSlotClass()}>
|
|
<BoundingBox size={16} weight="regular" />
|
|
</span>
|
|
<BottomControlDivider />
|
|
<span className={bottomControlLabelClass()}>X</span>
|
|
<span className={bottomControlValueClass()}>{Math.round(bounds.x)}</span>
|
|
<span className={bottomControlLabelClass()}>Y</span>
|
|
<span className={bottomControlValueClass()}>{Math.round(bounds.y)}</span>
|
|
<BottomControlDivider />
|
|
<span className={bottomControlLabelClass()}>W</span>
|
|
<span className={bottomControlValueClass()}>{Math.round(bounds.w)}</span>
|
|
<span className={bottomControlLabelClass()}>H</span>
|
|
<span className={bottomControlValueClass()}>{Math.round(bounds.h)}</span>
|
|
</div>
|
|
);
|
|
}
|