mirror of
https://github.com/complexcaresolutions/frontend.porwoll.de.git
synced 2026-03-17 15:13:42 +00:00
feat: add iconAlignment support (left/center/right) for stats block
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
b9816b9bfd
commit
5c5f07e430
1 changed files with 12 additions and 1 deletions
|
|
@ -64,6 +64,12 @@ const paddingMap: Record<string, string> = {
|
||||||
lg: 'py-ws-l',
|
lg: 'py-ws-l',
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const iconAlignmentMap: Record<string, string> = {
|
||||||
|
left: 'text-left',
|
||||||
|
center: 'text-center',
|
||||||
|
right: 'text-right',
|
||||||
|
}
|
||||||
|
|
||||||
function CountUpValue({ target, duration, prefix, suffix, fallback }: {
|
function CountUpValue({ target, duration, prefix, suffix, fallback }: {
|
||||||
target: number
|
target: number
|
||||||
duration: number
|
duration: number
|
||||||
|
|
@ -129,6 +135,7 @@ export function StatsBlock({ block }: StatsBlockProps) {
|
||||||
const valueSize = (style.valueSize as string) || 'xl'
|
const valueSize = (style.valueSize as string) || 'xl'
|
||||||
const valueWeight = (style.valueWeight as string) || 'bold'
|
const valueWeight = (style.valueWeight as string) || 'bold'
|
||||||
const showIcon = style.showIcon !== false
|
const showIcon = style.showIcon !== false
|
||||||
|
const iconAlignment = (style.iconAlignment as string) || 'left'
|
||||||
const dividers = Boolean(style.dividers)
|
const dividers = Boolean(style.dividers)
|
||||||
const gap = (style.gap as string) || '32'
|
const gap = (style.gap as string) || '32'
|
||||||
const padding = (style.padding as string) || 'md'
|
const padding = (style.padding as string) || 'md'
|
||||||
|
|
@ -197,7 +204,11 @@ export function StatsBlock({ block }: StatsBlockProps) {
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{showIcon && lucideIcon && (
|
{showIcon && lucideIcon && (
|
||||||
<div className={cn('mb-4', colorClass)}>
|
<div className={cn(
|
||||||
|
'mb-4',
|
||||||
|
colorClass,
|
||||||
|
iconAlignmentMap[iconAlignment] || 'text-left',
|
||||||
|
)}>
|
||||||
<DynamicIcon name={lucideIcon} size={40} strokeWidth={1.5} />
|
<DynamicIcon name={lucideIcon} size={40} strokeWidth={1.5} />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue