Files
tabler/shared/ui/SwitchIcon.astro
T

27 lines
788 B
Plaintext

---
import Icon from './Icon.astro'
interface Props {
icon?: string
iconBColor?: string
variant?: string
}
const { icon = 'heart', iconBColor = 'red', variant } = Astro.props
const resolvedIconB = icon ?? 'heart'
// star/heart force the filled variant; otherwise no extra class.
const resolvedIconBClass = icon === 'star' || icon === 'heart' ? 'icon-filled' : undefined
const buttonClass = ['switch-icon', variant && `switch-icon-${variant}`]
---
<button type="button" class:list={buttonClass} data-bs-toggle="switch-icon" aria-pressed="false" aria-label="Favorite">
<span class="switch-icon-a text-muted">
<Icon name={icon} />
</span>
<span class={`switch-icon-b text-${iconBColor}`}>
<Icon name={resolvedIconB} class={resolvedIconBClass} />
</span>
</button>