wilson/language-learning-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Add the ArticlePreview.svelte component to frontend

Browse source
This commit is contained in:
wilson 2026-03-31 07:22:58 +01:00
parent 7d6947338a
commit 0172003993
1 changed files with 127 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

127
frontend/src/routes/app/jobs/[job_id]/ArticlePreview.svelte Normal file
View file

@ -0,0 +1,127 @@
<script lang="ts">
import { formatLanguage } from '$lib/formatters';
import type { GetArticleBffArticlesArticleIdGetResponse } from '../../../../client/types.gen';
interface Props {
article: GetArticleBffArticlesArticleIdGetResponse | null;
fullAudioUrl?: string;
}
const { article, fullAudioUrl }: Props = $props();
</script>
{#if article}
<section class="content-section">
{#if fullAudioUrl}
<section class="content-section">
<h2 class="section-title">Audio</h2>
<audio class="audio-player" controls src={fullAudioUrl}>
Your browser does not support the audio element.
</audio>
</section>
{/if}
<h2 class="section-title">
Generated Text
<span class="section-lang">{formatLanguage(article.target_language)}</span>
</h2>
<div class="prose prose-target">{article.target_body}</div>
</section>
<section class="content-section">
<h2 class="section-title">
Translation
<span class="section-lang">{formatLanguage(article.source_language)}</span>
</h2>
<div class="prose prose-translated">{article.source_body}</div>
</section>
<section class="content-section">
<h2 class="section-title">Audio Transcript</h2>
<div class="pos-text">{JSON.stringify(article.target_body_transcript, null, 2)}</div>
</section>
<section class="content-section">
<h2 class="section-title">Generated Text with POS Tags</h2>
<div class="pos-text">{JSON.stringify(article.target_body_pos, null, 2)}</div>
</section>
<section class="content-section">
<h2 class="section-title">Translated Text with POS Tags</h2>
<div class="pos-text">{JSON.stringify(article.source_body_pos, null, 2)}</div>
</section>
{/if}
<style>
/* --- Content sections --- */
.content-section {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding-top: var(--space-4);
border-top: 1px solid color-mix(in srgb, var(--color-outline-variant) 30%, transparent);
}
.section-title {
font-family: var(--font-display);
font-size: var(--text-title-lg);
font-weight: var(--weight-semibold);
color: var(--color-on-surface);
display: flex;
align-items: baseline;
gap: var(--space-2);
}
.section-lang {
font-family: var(--font-label);
font-size: var(--text-label-md);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--color-on-surface-variant);
}
/* --- Prose --- */
.prose {
font-family: var(--font-body);
font-size: var(--text-body-lg);
line-height: var(--leading-relaxed);
color: var(--color-on-surface);
white-space: pre-wrap;
}
.prose-target {
padding: var(--space-5) var(--space-6);
background-color: var(--color-surface-container-low);
border-radius: var(--radius-lg);
font-size: calc(var(--text-body-lg) * 1.05);
}
/* --- Audio --- */
.audio-player {
width: 100%;
accent-color: var(--color-primary);
}
.prose-translated {
color: var(--color-on-surface-variant);
font-size: var(--text-body-md);
font-style: italic;
}
.pos-text {
font-family: var(--font-mono);
font-size: var(--text-body-sm);
line-height: var(--leading-relaxed);
color: var(--color-on-surface);
background-color: var(--color-surface-container-low);
padding: var(--space-4);
border-radius: var(--radius-md);
overflow-x: auto;
overflow-y: scroll;
max-height: 300px;
white-space: pre-wrap;
}
</style>