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

Code before:
    paddingBottom: 100,
  },
  items: {
    $nest: {
      // Target mini button's icon and label
      '& .ms-Icon, & .ms-Button-label': {
        color: cssVar('$black'),
      }
    }
  }
})


/** Create a preview card displaying an image with shadow overlay, title, social icons, caption, and button. */
interface State {
  /** An identifying name for this card. Makes the card clickable if label is not provided, similar to a button. */
  name: S
  /** The card’s image. */
  image: S
  /** The card's title */
  title?: S
  /** Component's displayed at the top-right corner */
  items?: Component[]
  /** The card's caption, displayed bellow the title. */
  caption?: S
  /** Label of a button rendered at the bottom of the card. If specified, whole card is not clickable anymore.. */
  label?: S
}

export const View = bond(({ name, state, changed }: Model<State>) => {
  const render = () => {
    const { image, title, name: stateName, label, caption, items } = state,
    onClick = () => {
      if (stateName.startsWith('#')) {
        window.location.hash = stateName.substr(1)
        return
      }
      wave.args[stateName] = stateName
      wave.push()
    },
    getGradient = () => {
      const { r, g, b } = Fluent.getColorFromString(cssVarValue('$card')) || { r: 255, g: 255, b: 255 }
      return `linear-gradient(rgba(${r}, ${g}, ${b}, .8) 50%, rgba(${r}, ${g}, ${b}, 0) 100%)`
    }

    return (
      <div data-test={name} className={css.card}>
        <div className={css.img} style={{ backgroundImage: `url('${image}')` }}>
          <div className={css.content} style={{ backgroundImage: `${getGradient()}` }}>
            <div className={css.header}>
              {title && <div className={clas(css.title, 'wave-s20 wave-w5')}>{title}</div>}

Review comment (suggestion):
```suggestion
  /** Label of a button rendered at the bottom of the card. If specified, the whole card is not clickable anymore. */
```

Code after:
    }
  }
})


/** Create a preview card displaying an image with shadow overlay, title, social icons, caption, and button. */
export interface State {
  /** An identifying name for this card. Makes the card clickable if label is not provided, similar to a button. */
  name: S
  /** The card’s image. */
  image: S
  /** The card's title */
  title?: S
  /** Mini buttons displayed at the top-right corner */
  items?: Component[]
  /** The card's caption, displayed bellow the title. */
  caption?: S
  /** Label of a button rendered at the bottom of the card. If specified, the whole card is not clickable anymore. */
  label?: S
}

export const View = bond(({ name, state, changed }: Model<State>) => {
  const render = () => {
    const { image, title, name: stateName, label, caption, items } = state,
    onClick = () => {
      if (stateName.startsWith('#')) {
        window.location.hash = stateName.substr(1)
        return
      }
      wave.args[stateName] = stateName
      wave.push()
      }

    return (
      <div
        data-test={name}
        onClick={stateName && !label ? onClick : undefined}
        className={clas(css.card, stateName && !label ? css.clickable : '')}
        style={{ backgroundImage: `url('${image}')` }}
      >
        <div className={css.content} style={{ background: cssVar('$card7'), boxShadow: `0px 6px 30px 30px ${cssVar('$card7')}`  }}>
          <div className={css.header}>
            {title && <div className='wave-s20 wave-w6'>{title}</div>}
            {items && <div className={css.items}><XComponents items={items} /></div>}
          </div>
          {caption && <div className='wave-s14 wave-t8'>{caption}</div>}
        </div>
        {label && <Fluent.PrimaryButton onClick={onClick} text={label} styles={{ root: { margin: '0 24px 24px 0', alignSelf: 'flex-end' } }} />}
      </div>
    )
  }