online-energieausweis/src/components/widgets/immowelt/WidgetCardTemplate.svelte

<script lang="ts">
	import { fade } from "svelte/transition";
	export let price: number;

	export let price1: number;
	export let price2: number;

	export let name: string;
	export let variant: string;
	export let services: [string, boolean][];
	export let href_buy1: string;
	export let href_buy2: string;
	export let href_buy3: string = "";

	export let src: string;
	export let alt: string;
	export let empfehlung: string;
	export let cta: string;
</script>

<div class="produktbox" transition:fade={{ duration: 0 }}>
	{#if empfehlung === "ja"}
		<div class="empfehlung" aria-label="Empfohlenes Produkt">
			Empfehlung
		</div>
	{/if}
	<h2 class="titel sm:mb-2">{name}</h2>

	<div class="sumCent">
		<div class="variante">{variant}</div>
		<img class="image" {src} {alt} />
		<div class="">
			<p class="price">
				ab {price} €
			</p>
		</div>
	</div>

	<hr class="col-span-2 w-full md:w-[50%] md:m-auto bg-[#ffcc00] h-[2px]" />

	<div class="sumRows forServices">
		{#each services as [service, check]}
			<div class="services">
				<span>{@html service}</span>
				<span class={check ? "check" : "check-no"}
					>{check ? "✔" : "✘"}</span
				>
			</div>
		{/each}
	</div>

	<hr class="col-span-2 w-full md:w-[50%] md:m-auto bg-[#ffcc00] h-[2px]" />

	<div
		class="sumCent buttoncols"
		class:md:grid-cols-3={href_buy3}
		class:md:grid-cols-2={!href_buy3}
	>
		<a
			href={href_buy1}
			class="buttoncol"
			aria-label="Jetzt {name} kaufen"
			target="_blank"
			>mach selbst (<span class="inside-price">{price}</span>&nbsp;€)
		</a>

		<a
			href={href_buy2}
			class="buttoncol"
			aria-label="{name} Produkt-Übersicht"
			target="_blank"
			>wir helfen (<span class="inside-price">{price1}</span>&nbsp;€)
		</a>

		{#if href_buy3}
			<a
				href={href_buy3}
				class="buttoncol"
				aria-label="{name} Produkt-Übersicht"
				target="_blank"
				>wir machen (<span class="inside-price">{price2}</span>&nbsp;€)
			</a>
		{/if}
	</div>
</div>

<style lang="postcss">
	.produktbox {
		@apply grid grid-cols-subgrid col-span-2 grid-rows-subgrid row-span-3 md:row-span-12 bg-black/5 rounded-lg
	px-2 py-2 mt-5;
		box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.25);

		.sumCent {
			@apply justify-self-center col-span-2;
		}
		.sumRows {
			@apply hidden sm:grid grid-rows-subgrid row-span-5 items-center;
		}
		.forServices {
			@apply grid-rows-subgrid row-span-5 items-center col-span-2 justify-center px-6;
		}

		.image {
			@apply w-[75%] mx-auto
	md:w-[75%] md:pl-0;
		}

		.buttoncols {
			@apply grid grid-cols-1 gap-x-4 w-full my-4
md:grid-cols-3 md:w-[auto];
		}

		.buttoncol {
			@apply mt-2 md:mt-0 text-center text-black bg-[#ffcc00] rounded-md px-3 py-1 no-underline
hover:bg-[#222222] hover:text-white;
		}
		.inside-price {
			@apply font-bold;
		}

		.price {
			@apply tracking-tighter text-[2rem] text-[#222222] pl-12 m-0 -mt-7 text-nowrap text-left;
			font-family: "Antique Olive Compact bold";
		}

		.titel {
			@apply col-span-2 text-center [font-size:_clamp(20px,2.5vw,28px)];
		}
		.empfehlung {
			@apply -mt-4 absolute justify-self-end rounded-md bg-red-700 text-white w-fit h-fit px-2 py-1 rotate-1 text-[0.65rem] ring-4 ring-white mr-6;
		}
		.variante {
			@apply w-fit italic col-span-2 -mt-2 -mb-4 text-[1rem] text-[#222222] justify-self-start ring-2 ring-[#ffcc00] rounded-md pl-[4px] pr-[6px] py-[0px];
		}

		.services {
			@apply hidden text-start py-1 md:grid grid-rows-subgrid row-span-1 items-center  md:grid-cols-[1fr_50px];
		}
		.services:not(:last-child) {
			@apply border-b-[1px] border-gray-200;
		}
		.check {
			@apply justify-self-end self-center font-bold text-green-700;
		}
		.check-no {
			@apply justify-self-end self-center font-bold text-red-700;
		}
	}
</style>