38 lines
1.2 KiB
Svelte
38 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
|
|
interface Props {
|
|
fontA: { name: string; id: string };
|
|
fontB: { name: string; id: string };
|
|
sliderPos: number;
|
|
}
|
|
let { fontA, fontB, sliderPos }: Props = $props();
|
|
</script>
|
|
|
|
<!-- Bottom Labels -->
|
|
<div class="absolute bottom-6 inset-x-8 sm:inset-x-12 flex justify-between items-center pointer-events-none z-20">
|
|
<!-- Left Label (Font A) -->
|
|
<div
|
|
class="flex flex-col gap-1 transition-opacity duration-300"
|
|
style:opacity={sliderPos < 10 ? 0 : 1}
|
|
>
|
|
<span class="text-[0.5rem] font-mono uppercase tracking-widest text-indigo-400"
|
|
>Baseline</span>
|
|
<span class="text-xs sm:text-sm font-bold text-indigo-600">
|
|
{fontB.name}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Right Label (Font B) -->
|
|
<div
|
|
class="flex flex-col items-end text-right gap-1 transition-opacity duration-300"
|
|
style:opacity={sliderPos > 90 ? 0 : 1}
|
|
>
|
|
<span class="text-[0.5rem] font-mono uppercase tracking-widest text-slate-400"
|
|
>Comparison</span>
|
|
<span class="text-xs sm:text-sm font-bold text-slate-900">
|
|
{fontA.name}
|
|
</span>
|
|
</div>
|
|
</div>
|