71 lines
1.7 KiB
Svelte
71 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
export let steps: string[] = [
|
|
"Gebäudedaten",
|
|
"Kundendaten",
|
|
"Kaufbestätigung",
|
|
];
|
|
export let stepsalign: string[] = [
|
|
"justify-self-start",
|
|
"justify-self-center",
|
|
"justify-self-end",
|
|
];
|
|
|
|
export let active: number;
|
|
export let progress: number = active / (steps.length - 1) * 100;
|
|
export let ausweisart;
|
|
export let anliegen;
|
|
|
|
import { PRICES } from "#lib/constants.js";
|
|
import { Enums } from "#lib/client/prisma.js";
|
|
</script>
|
|
|
|
<div id="progress-box" class="order-1 sm:order-2 w-full box relative px-4 pt-3 sm:py-3 text-center self-stretch">
|
|
<h1 class="text-secondary [font-size:_clamp(26px,1vw,18px)] m-0 font-bold sm:font-normal">Energieausweis {anliegen}</h1>
|
|
<h2 class="text-primary [font-size:_clamp(18px,1.5vw,24px)]">{ausweisart} {PRICES[ausweisart][Enums.AusweisTyp.Standard]} €</h2>
|
|
|
|
<div class="grid grid-cols-3 self-start justify-between">
|
|
<div class="col-span-3 relative">
|
|
<div
|
|
class="w-[calc(100%-0rem)] ml-[0] absolute mt-[0.5rem] bg-gray-200 h-3 rounded-lg"
|
|
>
|
|
<div
|
|
class="bg-green-600 left-0 h-3 absolute"
|
|
style={`width: ${progress}%;`}
|
|
></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{#each steps as step, i}
|
|
<div class="phase">
|
|
<div class="point {stepsalign[i]}" class:active={i === active}>{i + 1}</div>
|
|
<div class="phaseTitel">{step}</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<style lang="postcss">
|
|
.phase {
|
|
@apply grid grid-cols-1 items-center justify-items-center z-10;
|
|
.point {
|
|
@apply rounded-full w-8 h-8 text-white font-bold bg-gray-300 text-center pt-1 ring-white ring-4;
|
|
}
|
|
.active {
|
|
@apply bg-secondary;
|
|
}
|
|
.phaseTitel{@apply [font-size:_clamp(12px,1vw,18px)]}
|
|
}
|
|
|
|
:nth-child(1 of .phase) {
|
|
@apply justify-self-start;
|
|
}
|
|
|
|
.phase:last-of-type {
|
|
@apply justify-self-end;
|
|
}
|
|
</style>
|
|
|