import { css, html, nothing } from 'lit'; import { customElement } from 'lit/decorators.js'; import type { NakshatraResponse } from '../types/index.js'; import { RoxyDataElement } from '../utils/base-element.js'; import { baseStyles } from '../utils/base-styles.js'; /** * Nakshatra reference card. Renders /vedic-astrology/nakshatras/{id}: the * lunar mansion number, longitude range, ruling planet, presiding deity, * symbol, native characteristics, and traditional remedies. */ @customElement('roxy-nakshatra-card') export class RoxyNakshatraCard extends RoxyDataElement { static styles = [ baseStyles, css` .wrap { border: 1px solid var(--roxy-border, #e4e4e7); border-radius: var(--roxy-radius-md, 8px); background: var(--roxy-surface, #fff); color: var(--roxy-fg, #0a0a0a); padding: var(--roxy-space-md, 1rem); display: grid; gap: var(--roxy-space-md, 1rem); box-shadow: var(--roxy-shadow-sm); } .head { display: flex; align-items: baseline; gap: var(--roxy-space-sm, 0.5rem); flex-wrap: wrap; } .name { margin: 0; font-size: var(--roxy-text-lg, 1.125rem); font-weight: var(--roxy-weight-bold, 600); } .number { color: var(--roxy-accent-ink, #b45309); font-size: var(--roxy-text-sm, 0.875rem); font-weight: var(--roxy-weight-bold, 600); } .range { color: var(--roxy-muted, #71717a); font-size: var(--roxy-text-sm, 0.875rem); } .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--roxy-space-sm, 0.5rem); } .fact { display: grid; gap: 2px; } .fact dt { color: var(--roxy-muted, #71717a); font-size: var(--roxy-text-xs, 0.75rem); text-transform: uppercase; letter-spacing: 0.05em; } .fact dd { margin: 0; color: var(--roxy-fg, #0a0a0a); font-size: var(--roxy-text-sm, 0.875rem); } .section h3 { margin: 0 0 var(--roxy-space-xs, 0.25rem); font-size: var(--roxy-text-sm, 0.875rem); font-weight: var(--roxy-weight-bold, 600); color: var(--roxy-muted, #71717a); text-transform: uppercase; letter-spacing: 0.05em; } .section p { margin: 0; font-size: var(--roxy-text-sm, 0.875rem); color: var(--roxy-fg, #0a0a0a); line-height: 1.5; } .remedies { display: grid; gap: var(--roxy-space-xs, 0.25rem); } .remedy { font-size: var(--roxy-text-sm, 0.875rem); color: var(--roxy-fg, #0a0a0a); } .remedy strong { color: var(--roxy-muted, #71717a); font-weight: var(--roxy-weight-bold, 600); } `, ]; protected renderData(n: NakshatraResponse) { const remedies = n.remedies; return html`

${n.name}

${ typeof n.number === 'number' ? html`Nakshatra ${n.number} of 27` : nothing } ${n.range ? html`${n.range}` : nothing}
${n.lord ? html`
Lord
${n.lord}
` : nothing} ${n.deity ? html`
Deity
${n.deity}
` : nothing} ${n.symbol ? html`
Symbol
${n.symbol}
` : nothing}
${ n.characteristics ? html`

Characteristics

${n.characteristics}

` : nothing } ${ remedies ? html`

Remedies

${remedies.mantras ? html`
Mantras: ${remedies.mantras}
` : nothing} ${remedies.gemstones ? html`
Gemstones: ${remedies.gemstones}
` : nothing} ${remedies.rituals ? html`
Rituals: ${remedies.rituals}
` : nothing}
` : nothing }
`; } protected renderEmpty() { return html`
No nakshatra data
`; } } declare global { interface HTMLElementTagNameMap { 'roxy-nakshatra-card': RoxyNakshatraCard; } }