Repository: h2oai/wave
File: ui/src/postcard.tsx (TypeScript)

Code before:

/** Create a postcard displaying a persona, image, caption and optional buttons. */
interface State {
  /** The card's user avatar, 'size' prop is restricted to 'xs'. */
  persona: Component
  /** The card’s image. */
  image: S
  /** The card's aux_value, displayed on the right hand side of the image. */
  aux_value?: S
  /** The card's caption, displayed below the image. */
  caption?: S
  /** The card's buttons, displayed at the bottom. */
  items?: Component[]
}

export const View = bond(({ name, state, changed }: Model<State & { commands: Command[] }>) => {
  const render = () => {
    const { persona, image, aux_value, caption, items } = state
    if (persona.persona) persona.persona.size = 'xs'
    return (
      <div data-test={name} className={css.card}>
        <div className={css.header}>
          {persona.persona && <XPersona model={persona.persona} />}
          <div>
            {aux_value && <div className={clas('wave-s12 wave-t7', css.aux_value)}>{aux_value}</div>}
          </div>
        </div>
        <div className={css.img} style={{ backgroundImage: `url('${image}')` }}></div>
        {(caption || items) && (
          <div className={css.content}>
            {caption && <div className='wave-s14 wave-w4 wave-t7'>{caption}</div>}
            {items && <div className={css.items}><XComponents items={items} /></div>}
          </div>
        )}
      </div>
    )
  }

  return { render, changed }
})

cards.register('postcard', View)

Review comment (suggestion):
This extra div is probably not needed, right?

```suggestion
            {aux_value && <div className={clas('wave-s12 wave-t7', css.aux_value)}>{aux_value}</div>}
```

Code after:
/** Create a postcard displaying a persona, image, caption and optional buttons. */
interface State {
  /** The card's user avatar, 'size' prop is restricted to 'xs'. */
  persona: Component
  /** The card’s image. */
  image: S
  /** The card's aux_value, displayed on the right hand side of the image. */
  aux_value?: S
  /** The card's caption, displayed below the image. */
  caption?: S
  /** The card's buttons, displayed at the bottom. */
  items?: Component[]
}

export const View = bond(({ name, state, changed }: Model<State & { commands: Command[] }>) => {
  const render = () => {
    const { persona, image, aux_value, caption, items } = state
    if (persona.persona) persona.persona.size = 'xs'
    return (
      <div data-test={name} className={css.card}>
        <div className={css.header}>
          {persona.persona && <XPersona model={persona.persona} />}
          {aux_value && <div className={clas('wave-s12 wave-t7', css.aux_value)}>{aux_value}</div>}
        </div>
        <div className={css.img} style={{ backgroundImage: `url('${image}')` }}></div>
        {(caption || items) && (
          <div className={css.content}>
            {caption && <div className='wave-s14 wave-w4 wave-t7'>{caption}</div>}
            {items && <div className={css.items}><XComponents items={items} /></div>}
          </div>
        )}
      </div>
    )
  }

  return { render, changed }
})

cards.register('postcard', View)