46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type Position =
|
|
| "left top"
|
|
| "center top"
|
|
| "right top"
|
|
| "left center"
|
|
| "center center"
|
|
| "right center"
|
|
| "left bottom"
|
|
| "center bottom"
|
|
| "right bottom";
|
|
|
|
const positions: Position[] = [
|
|
"left top", "center top", "right top",
|
|
"left center", "center center", "right center",
|
|
"left bottom", "center bottom", "right bottom",
|
|
];
|
|
|
|
interface ObjectPositionControlProps {
|
|
value: string;
|
|
onChange: (value: Position) => void;
|
|
}
|
|
|
|
export function ObjectPositionControl({ value, onChange }: ObjectPositionControlProps) {
|
|
return (
|
|
<div className="grid grid-cols-3 gap-1 w-24 h-24 p-1 rounded-md bg-muted">
|
|
{positions.map((pos) => (
|
|
<button
|
|
key={pos}
|
|
type="button"
|
|
onClick={() => onChange(pos)}
|
|
className={cn(
|
|
"rounded-sm transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
|
value === pos
|
|
? "bg-primary"
|
|
: "bg-muted-foreground/20 hover:bg-muted-foreground/40"
|
|
)}
|
|
aria-label={`Set object position to ${pos.replace(' ', ' ')}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
} |