Editable Cell

import { EditableCell } from '@/blocks/data-display/editable-cell'

export default function Example() {
 const [value, setValue] = useState('Click to edit')

 return (
 <>
 {/* Basic editable cell */}
 <EditableCell
 value={value}
 onSave={(newValue) => setValue(newValue)}
 />

 {/* With type validation */}
 <EditableCell
 value={42}
 type="number"
 onSave={(value) => setNumber(Number(value))}
 />

 {/* With custom validation */}
 <EditableCell
 value={price}
 type="number"
 validate={(value) => {
 if (Number(value) < 0) return 'Must be positive'
 return null
 }}
 onSave={(value) => setPrice(Number(value))}
 />

 {/* With custom formatting */}
 <EditableCell
 value={99.99}
 type="number"
 format={(value) => `$${Number(value).toFixed(2)}`}
 onSave={(value) => setPrice(Number(value))}
 />

 {/* Alignment options */}
 <EditableCell
 value="Right aligned"
 align="right"
 onSave={(value) => setValue(String(value))}
 />

 {/* Disabled state */}
 <EditableCell
 value="Read only"
 disabled
 onSave={() => {}}
 />
 </>
 )
}