FlipperCard.svelte

<script>
  $: ({ communicationChannels, processes, description, responsibles, ...rest } = infusionPoints)
  export let imageUrl
  export let infusionPoints
  export let imageTitle

	let css;
	let first = true
  let flipped = false

	const flip = (node, { delay = 0, duration = 400 }) => {
		if (first) {
			css = (t, u) => `
				transform: rotateY( ${-u * 180}deg );
				opacity: ${1 - u};
			`
		}
		else {
			css = (t, u) => `
				transform: rotateY( ${u * 180}deg );
				opacity: ${1 - u};
			`
		}
		first ^= true
		return { delay, duration, css };
  }
</script>

<style>
  .card-container {
      height: 160px;
      width: 320px;
    }

  @media (min-width: 768px) {
    .card-container {
      height: 200px;
      width: 400px;
    }
  }
	.card {
    perspective: 30rem;
	}
</style>

<div class='card-container m-5 relative hover:scale-grow'>
	<div class='card absolute w-full h-full flex leading-normal bg-three rounded-lg border-2 border-four elevation-20'>
		{#if !flipped}
		<div class='side absolute overflow-hidden w-full h-full rounded-lg bg-three' transition:flip>
      <div class='h-full w-full flex-none bg-cover overflow-hidden' style='background-image: url("{imageUrl}")' title={imageTitle}>
        <div class='mt-6 mx-3 py-2 px-4 text-one bg-ten rounded-lg'>
          <div class='font-black text-eight text-lg md:text-xl'><slot name='front-title'/></div>
          <p class='text-three text-xs h-12 leading-tight break-words overflow-y-auto'><slot name='front-intro'/></p>
        </div>
      </div>
      <div class='absolute bottom-0 right-0'><button class='btn-primary hover:bg-three hover:elevation-5 m-2 px-2 py-1 rounded font-bold text-xs' on:click={() => flipped = !flipped}>Flip to Back</button></div>
    </div>
		{:else}
		<div class='side absolute overflow-hidden w-full h-full rounded-lg bg-two' transition:flip>
      <div class='mt-6 mx-3 py-1 px-4 font-black text-eight'>Infusion Points<div class='tracking-widest -mt-1 text-two'><slot name='front-title'/></div></div>
      <div class='ml-8 text-nine text-xs leading-snug h-12 md:h-16 overflow-y-auto'>
        <ul class='ml-4 list-disc'>
          <li><span>{communicationChannels}</span></li>
          <li><span>{processes}</span></li>
          <li><span>{description}</span></li>
          <li><span>{responsibles}</span></li>
        </ul>
      </div>
      <div class='absolute bottom-0 right-0'><button class='btn-primary hover:bg-three hover:elevation-5 m-2 px-2 py-1 rounded font-bold text-xs' on:click={() => flipped = !flipped}>Flip to Front</button></div>
		</div>
		{/if}
	</div>
</div>