Cacher is the code snippet organizer for pro developers

// src/components/books-list/books-list.tsx

import { Component, Prop } from '@stencil/core'

@Component({
  tag: 'books-list',
  styleUrl: 'books-list.css'
})
export class BooksList {
  @Prop() books: Array<any> = []

  render() {
    const { books } = this

    return (
      <ul>
        {books.map(book => {
          const { previewLink, title, imageLinks, authors } = book.volumeInfo
          const thumbnail = imageLinks ? imageLinks.thumbnail : ''
          const authors_ = authors ? authors.join(', ') : 'Unknown'

          return (
            <li>
              <a href={previewLink} target='__blank'>
                <img class='cover' src={thumbnail} />
                <div class='info'>
                  <div class='title'>{title}</div>
                  <div class='authors'>{authors_}</div>
                </div>
              </a>
            </li>
          )
        })}
      </ul>
    )
  }
}