fix(dashboard): improved funnels visually and removed bugs

This commit is contained in:
Carl-Gerhard Lindesvärd
2024-09-18 22:49:23 +02:00
parent dfe00040de
commit 3ca3079737
5 changed files with 121 additions and 104 deletions

View File

@@ -6,16 +6,15 @@ import * as React from 'react';
const Progress = React.forwardRef<
React.ElementRef<typeof ProgressPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
color: string;
size?: 'sm' | 'default' | 'lg';
}
>(({ className, value, color, size = 'default', ...props }, ref) => (
>(({ className, value, size = 'default', ...props }, ref) => (
<ProgressPrimitive.Root
ref={ref}
className={cn(
'relative h-4 w-full min-w-16 overflow-hidden rounded bg-def-200 shadow-sm',
size === 'sm' && 'h-2',
size === 'lg' && 'h-8',
size === 'lg' && 'h-5',
className,
)}
{...props}
@@ -24,11 +23,14 @@ const Progress = React.forwardRef<
className={'h-full w-full flex-1 rounded bg-primary transition-all'}
style={{
transform: `translateX(-${100 - (value || 0)}%)`,
background: color,
}}
/>
{value && size !== 'sm' && (
<div className="z-5 absolute bottom-0 top-0 flex items-center px-2 text-sm font-semibold">
<div
className={
'z-5 absolute bottom-0 top-0 flex items-center px-2 text-sm font-medium font-mono'
}
>
<div>{round(value, 2)}%</div>
</div>
)}