mirror of
https://github.com/LeNei/card-quartett-carousel.git
synced 2026-02-13 22:56:25 +00:00
41 lines
1.4 KiB
Svelte
41 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import DetailBox from './DetailBox.svelte';
|
|
import { carStatIcons } from '$lib/constants/icons';
|
|
|
|
export let title: string;
|
|
export let img: string;
|
|
export let rotation: number;
|
|
|
|
/*Info to be displayed*/
|
|
export let ps: number;
|
|
export let toHundred: number;
|
|
export let length: number;
|
|
export let maxKmh: number;
|
|
export let cylinders: number;
|
|
export let roundsPerMin: number;
|
|
</script>
|
|
|
|
<div
|
|
class="w-[250px] md:w-[350px] h-[400px] md:h-[500px] absolute bg-white rounded-xl p-2"
|
|
style="transform: rotateY({rotation}deg) translateZ(200px);"
|
|
>
|
|
<div class="bg-zinc-700 h-full rounded-xl overflow-hidden">
|
|
<h1
|
|
class="mb-2 text-sm md:text-lg font-semibold text-white bg-zinc-800 shadow-lg w-fit py-1 px-3 rounded-md"
|
|
>
|
|
{title}
|
|
</h1>
|
|
<div class="w-full h-[125px] md:h-[200px]">
|
|
<img class="object-cover w-full h-full" alt="" src={img} />
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4 p-5">
|
|
<DetailBox icon={carStatIcons.maxKmh} title="max. km/h" value={maxKmh} />
|
|
<DetailBox icon={carStatIcons.ps} title="PS" value={ps} />
|
|
<DetailBox icon={carStatIcons.toHundred} title="0-100 km/h" value={toHundred + 's'} />
|
|
<DetailBox icon={carStatIcons.roundsPerMin} title="Umdrehungen/min" value={roundsPerMin} />
|
|
<DetailBox icon={carStatIcons.length} title="Länge/m" value={length} />
|
|
<DetailBox icon={carStatIcons.cylinders} title="Zylinder" value={cylinders} />
|
|
</div>
|
|
</div>
|
|
</div>
|