steve
5cdc2779d7
Build image / build-and-push (push) Successful in 21s
Use the full Plant the picker returns (fixes the silent placement failure) and add a per-garden Seed Tray for quick repeat placing. Review fixes: disarm on tray-remove, cap load, consolidate toolbar guards, rename interface, tidy. Closes #39. Co-authored-by: Steve Dudenhoeffer <[email protected]>
67 lines
2.4 KiB
TypeScript
67 lines
2.4 KiB
TypeScript
import { cn } from '@/lib/cn'
|
|
import { PlantIcon } from '@/components/plants/PlantIcon'
|
|
import type { Plant } from '@/lib/plants'
|
|
|
|
/**
|
|
* The Seed Tray strip in the focus-mode toolbar: a row of the garden's
|
|
* kept-at-hand plants. Tap a chip to arm that plant for tap-to-place (the armed
|
|
* chip is highlighted); ✕ removes it from the tray; the trailing "+ Plant" chip
|
|
* opens the full catalog picker. See useSeedTray for persistence.
|
|
*/
|
|
export function SeedTray({
|
|
trayPlants,
|
|
armedPlantId,
|
|
onArm,
|
|
onRemove,
|
|
onOpenPicker,
|
|
}: {
|
|
trayPlants: Plant[]
|
|
armedPlantId: number | null
|
|
onArm: (plant: Plant) => void
|
|
onRemove: (id: number) => void
|
|
onOpenPicker: () => void
|
|
}) {
|
|
return (
|
|
<div className="flex flex-wrap items-center gap-1.5">
|
|
{trayPlants.map((p) => {
|
|
const active = p.id === armedPlantId
|
|
return (
|
|
<span
|
|
key={p.id}
|
|
className={cn(
|
|
'inline-flex items-center rounded-full border text-xs transition-colors',
|
|
active ? 'border-accent bg-accent/10 text-accent-strong' : 'border-border bg-surface text-fg',
|
|
)}
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={() => onArm(p)}
|
|
aria-pressed={active}
|
|
title={active ? `Placing ${p.name}` : `Place ${p.name}`}
|
|
className="flex items-center gap-1.5 rounded-full py-1 pl-1.5 pr-1 outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
|
|
>
|
|
<PlantIcon color={p.color} icon={p.icon} className="h-5 w-5 rounded-full text-[0.65rem]" />
|
|
<span className="max-w-[6rem] truncate font-medium">{p.name}</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => onRemove(p.id)}
|
|
aria-label={`Remove ${p.name} from tray`}
|
|
className="rounded-full px-1.5 py-1 text-muted outline-none hover:text-fg focus-visible:ring-2 focus-visible:ring-accent/40"
|
|
>
|
|
✕
|
|
</button>
|
|
</span>
|
|
)
|
|
})}
|
|
<button
|
|
type="button"
|
|
onClick={onOpenPicker}
|
|
className="inline-flex items-center gap-1 rounded-full border border-dashed border-border px-2.5 py-1 text-xs font-medium text-muted outline-none transition-colors hover:border-accent hover:text-accent-strong focus-visible:ring-2 focus-visible:ring-accent/40"
|
|
>
|
|
+ Plant
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|