Something went wrong. Try again.
Salary Cap Imagineering
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576import { useState } from 'react'import type { ParamField } from '../../../engine/module'import type { ModuleInstance } from '../../../engine/types'import { catColor } from '../catColor'import { Toggle } from '../primitives'import { ParamForm } from './ParamForm'
/** The subset of a module definition the card needs — satisfied by both * CapModuleDef and ExpansionModuleDef, so one card serves both tabs. */export interface CardDef { label: string blurb: string category: string paramSchema: ParamField[]}
export interface CardActions { toggle: (instanceId: string) => void remove: (instanceId: string) => void move: (instanceId: string, dir: -1 | 1) => void updateParam: (instanceId: string, key: string, value: unknown) => void}
export function ModuleCard({ def, instance, index, count, actions,}: { def: CardDef instance: ModuleInstance index: number count: number actions: CardActions}) { const [open, setOpen] = useState(false)
return ( <div className="module" data-disabled={!instance.enabled}> <div className="module__head" onClick={() => setOpen((o) => !o)}> <svg className="chev" data-open={open} width="14" height="14" viewBox="0 0 16 16" fill="none"> <path d="M6 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /> </svg> <span className="cat-dot" style={{ background: catColor(def.category) }} /> <div className="module__title"> <strong>{def.label}</strong> <span>{def.blurb}</span> </div> <div className="module__spacer" /> <div className="module__actions" onClick={(e) => e.stopPropagation()}> <button className="btn--icon" title="Move up" disabled={index === 0} onClick={() => actions.move(instance.id, -1)}> ↑ </button> <button className="btn--icon" title="Move down" disabled={index === count - 1} onClick={() => actions.move(instance.id, 1)}> ↓ </button> <button className="btn--icon" title="Remove" onClick={() => actions.remove(instance.id)}> ✕ </button> <Toggle on={instance.enabled} onChange={() => actions.toggle(instance.id)} label={`Enable ${def.label}`} /> </div> </div> {open && ( <div className="module__body"> <ParamForm schema={def.paramSchema} params={instance.params} onChange={(key, value) => actions.updateParam(instance.id, key, value)} /> </div> )} </div> )}