pascallinxweiler/Webify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[dyad] Making the position grid more minimal - wrote 1 file(s)

Browse Source
This commit is contained in:
[dyad]
2026-01-18 18:15:30 +01:00
parent 26a947c9b7
commit 98c932415e
1 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/object-position-control.tsx
View File

@@ -26,20 +26,23 @@ interface ObjectPositionControlProps {
export function ObjectPositionControl({ value, onChange }: ObjectPositionControlProps) { export function ObjectPositionControl({ value, onChange }: ObjectPositionControlProps) {
return ( return (
<div className="grid grid-cols-3 gap-1 w-24 h-24 p-1 rounded-md bg-muted"> <div className="grid grid-cols-3 gap-px w-16 h-16 rounded-md border bg-border overflow-hidden">
{positions.map((pos) => ( {positions.map((pos) => (
<button <button
key={pos} key={pos}
type="button" type="button"
onClick={() => onChange(pos)} onClick={() => onChange(pos)}
className={cn( className={cn(
"rounded-sm transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", "flex items-center justify-center bg-background transition-colors focus:outline-none focus:z-10 focus:ring-2 focus:ring-ring",
value === pos "hover:bg-accent",
? "bg-primary" value === pos && "bg-accent"
: "bg-muted-foreground/20 hover:bg-muted-foreground/40"
)} )}
aria-label={`Set object position to ${pos.replace(' ', ' ')}`} aria-label={`Set object position to ${pos.replace(' ', ' ')}`}
/> >
{value === pos && (
<div className="w-2 h-2 rounded-full bg-primary ring-1 ring-primary-foreground" />
)}
</button>
))} ))}
</div> </div>
); );