pdfer/components/Preview.tsx

import React from 'react'

export default function Preview({
  pdfIsLoading,
  pdfError,
  pdfUrl,
}: {
  pdfIsLoading: boolean
  pdfError: string
  pdfUrl: string
}) {
  if (pdfIsLoading) {
    return <div>Lade&hellip;</div>
  }

  const errorStyles = {
    padding: '6px 12px',
    color: 'white',
    backgroundColor: '#d81e1e',
    borderRadius: '3px',
  }

  if (pdfError) {
    return (
      <div style={errorStyles}>
        <span role="img" aria-label="Crying Man">
          😢
        </span>{' '}
        {pdfError}
      </div>
    )
  }

  if (!pdfUrl) {
    return <div>Knopf drücken dann gibts hier was zu sehen!</div>
  }

  const styles = {
    width: '700px',
    height: '1050px',
  }

  return <embed src={pdfUrl} style={styles} type="application/pdf" />
}