72 lines
1.6 KiB
Svelte
72 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import { getDefinition } from '$lib/data/unitDefinitions';
|
|
import type { CalculatorDef } from '$lib/data/calculators';
|
|
|
|
export let config: CalculatorDef;
|
|
|
|
let label1 = 'Unit 1';
|
|
let label2 = 'Unit 2';
|
|
let def1: string | undefined;
|
|
let def2: string | undefined;
|
|
|
|
$: label1 = config.labels.in1 || 'Unit 1';
|
|
$: label2 = config.labels.in2 || 'Unit 2';
|
|
$: def1 = getDefinition(label1, config.category);
|
|
$: def2 = getDefinition(label2, config.category);
|
|
</script>
|
|
|
|
<section class="definition-card">
|
|
<h3>Unit definitions</h3>
|
|
<div class="definition-grid">
|
|
<article>
|
|
<strong>{label1}</strong>
|
|
<p>{def1 ?? `Definition pending for ${label1}.`}</p>
|
|
</article>
|
|
<article>
|
|
<strong>{label2}</strong>
|
|
<p>{def2 ?? `Definition pending for ${label2}.`}</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.definition-card {
|
|
margin: 0 2rem 2rem;
|
|
padding: 1.25rem 1.5rem;
|
|
border-radius: 12px;
|
|
background: var(--section-bg);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.definition-card h3 {
|
|
margin: 0 0 0.75rem;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.definition-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
.definition-grid article {
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
padding: 0.9rem;
|
|
}
|
|
|
|
.definition-grid strong {
|
|
display: block;
|
|
font-size: 0.95rem;
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
.definition-grid p {
|
|
margin: 0;
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
}
|
|
</style>
|