---
interface Props {
  height?: number
  class?: string
}

const width = 400
const { height = 200, class: className } = Astro.props
---

<div class={`card-body${className ? ` ${className}` : ''}`}>
  <svg xmlns="http://www.w3.org/2000/svg" class="w-100 border rounded" preserveAspectRatio="none" width={width} height={height} viewBox={`0 0 ${width} ${height}`} fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
    <line x1="0" y1="0" x2={width} y2={height}></line>
    <line x1="0" y1={height} x2={width} y2="0"></line>
  </svg>
</div>