10fdaf7d00
Replaces hardcoded rgba(0,199,177,...) with color-mix using var(--color-turquoise) for dark mode compatibility. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
59 lines
1.6 KiB
Svelte
59 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import type { TranscriptionBlockData } from '$lib/types';
|
|
import { splitByMarkers } from '$lib/utils/transcriptionMarkers';
|
|
|
|
interface Props {
|
|
blocks: TranscriptionBlockData[];
|
|
onParagraphClick: (annotationId: string) => void;
|
|
highlightBlockId?: string | null;
|
|
}
|
|
|
|
let { blocks, onParagraphClick, highlightBlockId = null }: Props = $props();
|
|
|
|
let sorted = $derived([...blocks].sort((a, b) => a.sortOrder - b.sortOrder));
|
|
</script>
|
|
|
|
<article class="px-6 py-8">
|
|
{#each sorted as block (block.id)}
|
|
<div
|
|
class="-mx-2 mb-6 cursor-pointer rounded-sm px-2 py-1 font-serif text-[16px] leading-[1.85] text-ink transition-colors hover:bg-turquoise/10"
|
|
class:flash-highlight={highlightBlockId === block.id}
|
|
data-block-id={block.id}
|
|
onclick={() => onParagraphClick(block.annotationId)}
|
|
role="button"
|
|
tabindex="0"
|
|
onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') onParagraphClick(block.annotationId); }}
|
|
>
|
|
{#each splitByMarkers(block.text) as segment, i (i)}
|
|
{#if segment.type === 'marker'}
|
|
<em data-marker class="text-ink-2 italic">{segment.text}</em>
|
|
{:else}
|
|
{segment.text}
|
|
{/if}
|
|
{/each}
|
|
</div>
|
|
{/each}
|
|
</article>
|
|
|
|
<style>
|
|
@keyframes flash {
|
|
0% {
|
|
background-color: color-mix(in srgb, var(--color-turquoise) 18%, transparent);
|
|
}
|
|
100% {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.flash-highlight {
|
|
animation: flash 1.2s ease-out;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.flash-highlight {
|
|
animation: none;
|
|
background-color: color-mix(in srgb, var(--color-turquoise) 18%, transparent);
|
|
}
|
|
}
|
|
</style>
|