57 lines
2.4 KiB
Svelte
57 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import CircleHelpIcon from '@lucide/svelte/icons/circle-help';
|
|
|
|
import { Card, CardContent } from '$lib/components/ui/card';
|
|
import * as Tooltip from '$lib/components/ui/tooltip';
|
|
import { formatPercent } from '$lib/format';
|
|
import { cn } from '$lib/utils';
|
|
|
|
let { value, class: className }: { value: string | null; class?: string } = $props();
|
|
const percent = $derived(value === null ? 0 : Math.max(0, Math.min(100, Number(value))));
|
|
</script>
|
|
|
|
<Card class={cn('rounded-lg shadow-xs', className)}>
|
|
<CardContent class="flex h-full flex-col items-center justify-center gap-5 p-6 text-center sm:p-8">
|
|
<div
|
|
class="relative grid size-40 shrink-0 place-items-center sm:size-48"
|
|
role="img"
|
|
aria-label={`سهم کارمزد ${formatPercent(value)}`}
|
|
>
|
|
<svg class="size-full -rotate-90" viewBox="0 0 42 42" aria-hidden="true">
|
|
<circle cx="21" cy="21" r="15.9" fill="none" stroke="var(--muted)" stroke-width="4" />
|
|
<circle
|
|
cx="21"
|
|
cy="21"
|
|
r="15.9"
|
|
fill="none"
|
|
stroke="var(--primary)"
|
|
stroke-width="4"
|
|
stroke-linecap="round"
|
|
pathLength="100"
|
|
stroke-dasharray={`${percent} ${100 - percent}`}
|
|
class="transition-[stroke-dasharray] duration-700 motion-reduce:transition-none"
|
|
/>
|
|
</svg>
|
|
<strong class="absolute text-xl font-extrabold tabular-nums">{formatPercent(value)}</strong>
|
|
</div>
|
|
<div class="max-w-sm min-w-0">
|
|
<div class="flex items-center justify-center gap-1.5">
|
|
<h2 class="text-sm font-semibold">سهم کارمزد از پرداخت موفق</h2>
|
|
<Tooltip.Root>
|
|
<Tooltip.Trigger
|
|
aria-label="روش محاسبه سهم کارمزد"
|
|
class="text-muted-foreground hover:text-primary -m-3 inline-flex size-11 items-center justify-center"
|
|
><CircleHelpIcon class="size-4" /></Tooltip.Trigger
|
|
>
|
|
<Tooltip.Content class="max-w-72 text-right leading-6"
|
|
>کارمزد ثبتشده تقسیم بر مبلغ پرداختهای موفق در همین بازه.</Tooltip.Content
|
|
>
|
|
</Tooltip.Root>
|
|
</div>
|
|
<p class="text-muted-foreground mt-2 text-sm leading-7">
|
|
بخش آبی، سهم واقعی کارمزد را از کل مبلغ موفق این بازه نشان میدهد.
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|