export const getAspectRatioPadding = (ratioString: string) => {
  const sides = ratioString.split(':')
  if (sides.length < 2) return '100%'
  return (+sides[1] * 100) / +sides[0] + '%'
}

export const mdxPlacholderText =
  'Als das Einhorn eines Morgens aus unruhigen Träumen erwachte, fand es sich in seinem Kopf ein kleines Niemalsstill beherbergend. Nun wusste das Einhorn nicht was ein Niemalsstill ist, geschweige denn wie es in seinen Kopf kam, daher frühstückte es erstmal ausgiebig. So aß das Einhorn zwölf Rüben, Joghurt und Quark bevor es daüber nachdachte warum statt Jux und Dollerei sein Kopf nun ein kleines Niemasstill beherbergte. Wie sollte es dieses Niemalsstill loswerden? Sollte ihm Viktor, ein Vogel aus Pforzheim, helfen können? Oder sollte es doch lieber flinke sylter Boxer damit beauftragen das quälend zwickende Niemalsstill zu verjagen? Das Einhorn wusste nicht was zu tun ist, dabei wollte es doch so gerne polyphone Xylophonmusik üben. Wie blöd, quäkte das Einhorn und legte sich wieder hin.'
export const oversizedDefault = 20
export const placeholderString =
  "data:image/svg+xml, %3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 500 500' xmlSpace='preserve' preserveAspectRatio='none' %3E%3Cg%3E%3Cpath d='M499,1v498H1V1H499 M500,0H0v500h500V0L500,0z' vector-effect='non-scaling-stroke' stroke-width='1px' stroke='%23888' /%3E%3Cline vector-effect='non-scaling-stroke' stroke-width='1px' stroke='%23888' x1='0' y1='0' x2='500' y2='500' /%3E%3Cline vector-effect='non-scaling-stroke' stroke-width='1px' stroke='%23888' x1='0' y1='500' x2='500' y2='0' /%3E%3C/g%3E%3C/svg%3E"

/* Placeholder SVG to generate Data-URI
  <svg
    version='1.1'
    id='Layer_1'
    xmlns='http://www.w3.org/2000/svg'
    xmlnsXlink='http://www.w3.org/1999/xlink'
    x='0px'
    y='0px'
    viewBox='0 0 500 500'
    xmlSpace='preserve'
    preserveAspectRatio='none'
  >
    <g>
      <path
        d='M499,1v498H1V1H499 M500,0H0v500h500V0L500,0z'
        vector-effect='non-scaling-stroke'
        stroke-width='1px'
        stroke='#888'
      />
      <line
        vector-effect='non-scaling-stroke'
        stroke-width='1px'
        stroke='#888'
        x1='0'
        y1='0'
        x2='500'
        y2='500'
      />
      <line
        vector-effect='non-scaling-stroke'
        stroke-width='1px'
        stroke='#888'
        x1='0'
        y1='500'
        x2='500'
        y2='0'
      />
    </g>
  </svg>

*/