80 lines
1.7 KiB
JavaScript
80 lines
1.7 KiB
JavaScript
import { LitElement, css, html, unsafeCSS } from 'lit'
|
|
|
|
import MainCSS from '../assets/styles/main.scss'
|
|
|
|
import './SvgIcon.js'
|
|
|
|
class AudioCard extends LitElement {
|
|
static properties = {
|
|
idx: { type: Number },
|
|
icon: { type: String },
|
|
details: { type: Object },
|
|
selected: { type: Boolean }
|
|
}
|
|
|
|
constructor() {
|
|
super()
|
|
this.details = {}
|
|
this.icon = 'play-circle'
|
|
}
|
|
|
|
clickHandler() {
|
|
const event = new CustomEvent('select-audio', {
|
|
bubbles: true, composed: true,
|
|
detail: { ...this.details, idx: this.idx }
|
|
})
|
|
|
|
this.dispatchEvent(event)
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<div class="card ${this.selected ? 'selected' : ''}" @click=${this.clickHandler}>
|
|
<mm-icon name=${this.icon}></mm-icon>
|
|
|
|
<main>
|
|
<p class="heading">${this.details?.title}</p>
|
|
<p class="info">${this.details?.details}</p>
|
|
</main>
|
|
</div>
|
|
`
|
|
}
|
|
|
|
static styles = [ css`${unsafeCSS(MainCSS)}`, css`
|
|
* {
|
|
margin: 0;
|
|
}
|
|
|
|
.heading {
|
|
font-weight: 500;
|
|
}
|
|
|
|
mm-icon {
|
|
color: var(--green-400, black);
|
|
font-size: 3em;
|
|
}
|
|
|
|
.card {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-template-columns: min-content 1fr;
|
|
gap: 1em;
|
|
align-items: center;
|
|
padding-inline: 0.75em;
|
|
padding-block: 0.5em;
|
|
background: var(--neutral-100, white);
|
|
min-height: 3.5em;
|
|
border-radius: 0.5em;
|
|
box-shadow: var(--box-shadow);
|
|
outline: 2px solid transparent;
|
|
transition: outline 0.5s ease;
|
|
}
|
|
|
|
.card.selected {
|
|
outline: 2px solid var(--green-400, black);
|
|
}
|
|
` ]
|
|
}
|
|
|
|
customElements.define('mm-acard', AudioCard)
|