Something went wrong. Try again.
An atproto Tilemap editor
Something went wrong. Try again.
2.2 kB · 70 lines
TSX
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071import { Plus, X } from 'lucide-react'import { Button } from '@/components/ui/button'import { Input } from '@/components/ui/input'
export interface KeyValue { key: string value: string}
/** Shared editor for the custom name:value property lists attached to * materials, objects, and layers. */export default function PropertyList({ label, items, onAdd, onUpdate, onRemove, emptyHint = 'None. Add custom name:value pairs for games to read.',}: { label: string items: KeyValue[] onAdd: () => void onUpdate: (index: number, patch: Partial<KeyValue>) => void onRemove: (index: number) => void emptyHint?: string}) { return ( <div className="flex flex-col gap-1.5"> <div className="flex items-center justify-between text-xs font-medium tracking-wide text-muted-foreground uppercase"> <span className="truncate">{label}</span> <Button type="button" variant="outline" size="xs" onClick={onAdd}> <Plus /> Add </Button> </div> {items.length === 0 ? ( <p className="text-xs text-muted-foreground">{emptyHint}</p> ) : ( <ul className="flex list-none flex-col gap-1.5 p-0"> {items.map((p, i) => ( <li key={i} className="flex items-center gap-1"> <Input className="h-7 basis-[38%] text-sm" placeholder="name" value={p.key} onChange={(e) => onUpdate(i, { key: e.target.value })} /> <Input className="h-7 flex-1 text-sm" placeholder="value" value={p.value} onChange={(e) => onUpdate(i, { value: e.target.value })} /> <Button type="button" variant="ghost" size="icon-sm" title="Delete property" className="shrink-0 text-muted-foreground hover:text-destructive" onClick={() => onRemove(i)} > <X /> </Button> </li> ))} </ul> )} </div> )}