mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
38 lines
942 B
Plaintext
38 lines
942 B
Plaintext
---
|
|
import Icon from '@ui/Icon.astro'
|
|
import CardTitle from '@ui/CardTitle.astro'
|
|
|
|
interface Props {
|
|
city?: string
|
|
temperature?: string | number
|
|
color?: string
|
|
icon?: string
|
|
description?: string
|
|
}
|
|
|
|
const { city = 'Warsaw', temperature = 20, color = 'blue', icon = 'cloud-rain', description = 'Cloudy morning' } = Astro.props
|
|
---
|
|
|
|
<div class={`card card-gradient card-gradient-${color} card-gradient-end`}>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col-auto">
|
|
<CardTitle class="mb-2">{city}</CardTitle>
|
|
</div>
|
|
<div class="col">
|
|
<Icon name={icon} />
|
|
</div>
|
|
</div>
|
|
<div class="text-secondary">
|
|
{description}
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="display-5 lh-1 fw-lighter">{temperature}°</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|