25 lines
847 B
TypeScript
25 lines
847 B
TypeScript
import { Hand } from "@phosphor-icons/react";
|
|
import { BottomControlDivider } from "./Divider";
|
|
import { bottomControlIconSlotClass, bottomControlLabelClass, bottomControlValueClass } from "./styles";
|
|
|
|
export type PanControlsProps = {
|
|
x: number;
|
|
y: number;
|
|
};
|
|
|
|
export function PanControls({ x, y }: PanControlsProps) {
|
|
return (
|
|
<div className="flex w-full items-center justify-center gap-2 tabular-nums">
|
|
<span className={bottomControlIconSlotClass()}>
|
|
<Hand size={16} weight="regular" />
|
|
</span>
|
|
<BottomControlDivider />
|
|
<span className={bottomControlLabelClass()}>X</span>
|
|
<span className={bottomControlValueClass()}>{x}</span>
|
|
<BottomControlDivider />
|
|
<span className={bottomControlLabelClass()}>Y</span>
|
|
<span className={bottomControlValueClass()}>{y}</span>
|
|
</div>
|
|
);
|
|
}
|