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={() => {}}
      />
    </>
  )
}