mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 13:21:29 +04:00
codecalm
f27c70ad38
`Render Modal as real markup` (#2742) reformatted ~140 files back to tabs/semicolons, breaking the Prettier config added by the Astro quality gates (#2749). Re-run prettier --write to restore it, and fix the type errors it had been masking: HTMLElement casts and `this` typing in ChangePasswordModalContent/ConfirmDeleteModalContent scripts, plain-JS syntax in the inline-injected progress.astro script, narrowed prop unions in Button/Check/Spinner, nullable icon svg casts in Icons/Rating, and a duplicate firstLetters/invalid `placeholder` attribute in Select.astro. Also fix shared/vitest.config.mts's stale `astro/lib/**/*.test.ts` include glob left over from the shared source restructure, which made `pnpm test` report zero test files.
53 lines
1.4 KiB
Plaintext
53 lines
1.4 KiB
Plaintext
---
|
|
import Subheader from '@ui/Subheader.astro'
|
|
import Icon from '@ui/Icon.astro'
|
|
import Trending from '@ui/Trending.astro'
|
|
|
|
interface Props {
|
|
color?: string
|
|
icon?: string
|
|
/** lt — light avatar background (bg-{color}-lt) instead of bg-{color} text-white */
|
|
lt?: boolean
|
|
title?: string
|
|
description?: string
|
|
/** change-value — passed to Trending (keeps its +/- sign) */
|
|
changeValue?: string
|
|
/** change-value-unit — trending unit; defaults to '%' in Trending when unset */
|
|
changeValueUnit?: string
|
|
class?: string
|
|
}
|
|
|
|
const { color, icon, lt, title = '1700', description = 'Users', changeValue, changeValueUnit, class: className } = Astro.props
|
|
|
|
const avatarClass = [color ? `bg-${color}${lt ? '-lt' : ' text-white'}` : '', 'avatar', 'avatar-square']
|
|
---
|
|
|
|
<div class:list={['card card-sm', className]}>
|
|
<div class="card-body p-3">
|
|
<div class="row align-items-center">
|
|
{
|
|
icon && (
|
|
<div class="col-auto">
|
|
<span class:list={avatarClass}>
|
|
<Icon name={icon} />
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
<div class="col">
|
|
<Subheader>
|
|
{title}
|
|
</Subheader>
|
|
<div class="h3 m-0 p-0">
|
|
{description}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-auto">
|
|
<Trending value={changeValue as unknown as number} unit={changeValueUnit} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|