mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 13:21:29 +04:00
`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.
56 lines
1.5 KiB
Plaintext
56 lines
1.5 KiB
Plaintext
---
|
|
// person = people[person-id - 1] (default person-id = 25 → people[24]).
|
|
import Icon from '@ui/Icon.astro'
|
|
import Flag from '@ui/Flag.astro'
|
|
import people from '@data/people.json'
|
|
|
|
interface Person {
|
|
university?: string
|
|
company?: string
|
|
city?: string
|
|
country?: string
|
|
country_code?: string
|
|
birth_date?: string
|
|
time_zone?: string
|
|
[key: string]: unknown
|
|
}
|
|
|
|
interface Props {
|
|
title?: string
|
|
personId?: number
|
|
}
|
|
|
|
const { title = 'Basic info', personId = 25 } = Astro.props
|
|
const person = (people as Person[])[personId - 1]
|
|
---
|
|
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="card-title">{title}</div>
|
|
<div class="mb-2">
|
|
<Icon name="book" class="me-2 text-secondary" />
|
|
Went to: <strong>{person.university}</strong>
|
|
</div>
|
|
<div class="mb-2">
|
|
<Icon name="briefcase" class="me-2 text-secondary" />
|
|
Worked at: <strong>{person.company}</strong>
|
|
</div>
|
|
<div class="mb-2">
|
|
<Icon name="home" class="me-2 text-secondary" />
|
|
Lives in: <strong>{person.city}, {person.country}</strong>
|
|
</div>
|
|
<div class="mb-2">
|
|
<Icon name="map-pin" class="me-2 text-secondary" />
|
|
From: <strong><Flag size="xs" flag={person.country_code} /> {person.country}</strong>
|
|
</div>
|
|
<div class="mb-2">
|
|
<Icon name="calendar" class="me-2 text-secondary" />
|
|
Birth date: <strong>{person.birth_date}</strong>
|
|
</div>
|
|
<div>
|
|
<Icon name="clock" class="me-2 text-secondary" />
|
|
Time zone: <strong>{person.time_zone}</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|