marcel/familienarchiv
1
0
Fork 0
Code Issues 111 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: move shared components to lib/shared/ sub-packages

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-05 14:40:14 +02:00
parent d6db7a07bd
commit efcc347c00
84 changed files with 43 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/src/lib/shared/primitives/DistributionBar.svelte Normal file
View File

@@ -0,0 +1,60 @@
<script lang="ts">
import * as m from '$lib/paraglide/messages.js';
interface Props {
outCount: number;
inCount: number;
senderName: string;
receiverName: string;
}
let { outCount, inCount, senderName, receiverName }: Props = $props();
const total = $derived(outCount + inCount);
const outPct = $derived(total > 0 ? (outCount / total) * 100 : 0);
const shortSenderName = $derived(senderName.split(' ')[0] ?? senderName);
const shortReceiverName = $derived(receiverName.split(' ')[0] ?? receiverName);
const ariaLabel = $derived(m.dist_bar_aria({ outCount, senderName, inCount, receiverName }));
const outSegmentText = $derived(m.dist_bar_segment({ count: outCount, name: shortSenderName }));
const inSegmentText = $derived(m.dist_bar_segment({ count: inCount, name: shortReceiverName }));
</script>
<div
class="flex flex-col gap-1 border-b border-line bg-muted px-[18px] py-2"
role="img"
aria-label={ariaLabel}
>
<div class="flex justify-between text-sm font-bold">
<span class="inline-flex items-center gap-1 text-primary"
>{outSegmentText}
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Right-MD.svg"
alt=""
aria-hidden="true"
class="inline h-3.5 w-3.5 opacity-60"
/></span
>
<span class="inline-flex items-center gap-1 text-accent"
>{inSegmentText}
<img
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Left-MD.svg"
alt=""
aria-hidden="true"
class="inline h-3.5 w-3.5 opacity-60"
/></span
>
</div>
<div class="flex h-[5px] overflow-hidden rounded-full bg-line">
<div
data-testid="dist-bar-segment"
class="h-full bg-primary transition-all"
style="width: {outPct}%"
></div>
<div
data-testid="dist-bar-segment"
class="h-full bg-accent transition-all"
style="width: {100 - outPct}%"
></div>
</div>
</div>