76 lines
1.7 KiB
JavaScript
76 lines
1.7 KiB
JavaScript
/**
|
|
* Section Title Component
|
|
* Displays a title with an arrow right icon on the right side
|
|
*/
|
|
import { arrowRightIcon } from "../icons/arrow-right.js";
|
|
|
|
class SectionTitle extends HTMLElement {
|
|
static get observedAttributes() {
|
|
return ["text"];
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({ mode: "open" });
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.render();
|
|
}
|
|
|
|
attributeChangedCallback() {
|
|
if (this.shadowRoot) {
|
|
this.render();
|
|
}
|
|
}
|
|
|
|
get text() {
|
|
return this.getAttribute("text") || this.textContent || "Section Title";
|
|
}
|
|
|
|
render() {
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host {
|
|
display: block;
|
|
}
|
|
|
|
.section-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--spacing-lg, 1.5rem) 0;
|
|
}
|
|
|
|
.title-text {
|
|
font-family: var(--font-family-outfit, "Outfit", sans-serif);
|
|
font-size: var(--font-size-2xl, 1.5rem);
|
|
font-weight: var(--font-weight-normal, 400);
|
|
line-height: var(--line-height-24, 24px);
|
|
color: var(--color-text, #1e293b);
|
|
margin: 0;
|
|
}
|
|
|
|
.icon-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--color-text, #1e293b);
|
|
}
|
|
|
|
.icon-wrapper svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
</style>
|
|
<div class="section-title">
|
|
<h2 class="title-text">${this.text}</h2>
|
|
<div class="icon-wrapper">
|
|
${arrowRightIcon({ size: 24, color: "currentColor" })}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define("section-title", SectionTitle);
|