92 lines
2.3 KiB
JavaScript
92 lines
2.3 KiB
JavaScript
class FeatureSet extends WebComponent {
|
|
#features = [
|
|
{
|
|
icon: "️🔄",
|
|
title: "Reactive.",
|
|
description:
|
|
"A robust API for synchronizing your component's UI and properties",
|
|
},
|
|
{
|
|
icon: "️🤏",
|
|
title: "Tiny.",
|
|
description:
|
|
"~1 kB base class (minified, compressed) with versatile utilities",
|
|
},
|
|
{
|
|
icon: "😌",
|
|
title: "Easy.",
|
|
description: "Sensible life-cycle hooks that you understand and remember",
|
|
url: "",
|
|
},
|
|
{
|
|
icon: "️💡",
|
|
title: "Familiar.",
|
|
description:
|
|
"Use the built-in JSX-like syntax or bring your own custom templating",
|
|
url: "https://codepen.io/ayoayco-the-styleful/pen/ZEwNJBR?editors=1010",
|
|
},
|
|
{
|
|
icon: "️🛜",
|
|
title: "Powerful.",
|
|
description:
|
|
"Attach 'side effects' that gets triggered on property value changes",
|
|
url: "",
|
|
},
|
|
];
|
|
|
|
/**
|
|
* @type {Array<HTMLArticleElement>}
|
|
*/
|
|
get articleEl() {
|
|
return this.querySelectorAll("article");
|
|
}
|
|
|
|
afterViewInit() {
|
|
/**
|
|
* @type {Partial<CSSStyleDeclaration>}
|
|
*/
|
|
const articleStyles = {
|
|
border: "1px solid #ccc",
|
|
borderRadius: "5px",
|
|
padding: "30px",
|
|
margin: "0 auto 1em",
|
|
boxShadow: "5px 25px 10px -25px rgba(34, 34, 34, 0.15)",
|
|
};
|
|
Object.keys(articleStyles).forEach((rule) =>
|
|
this.articleEl.forEach((el) => (el.style[rule] = articleStyles[rule])),
|
|
);
|
|
|
|
/**
|
|
* @type {Partial<CSSStyleDeclaration>}
|
|
*/
|
|
const ftrStyles = {
|
|
maxWidth: "800px",
|
|
margin: "0 auto",
|
|
padding: "30px",
|
|
gap: "1em",
|
|
};
|
|
const featureWrapper = this.querySelector(".feature-wrapper");
|
|
Object.keys(ftrStyles).forEach(
|
|
(rule) => (featureWrapper.style[rule] = ftrStyles[rule]),
|
|
);
|
|
}
|
|
|
|
get template() {
|
|
return html`
|
|
<div class="feature-wrapper">
|
|
${this.#features.map(
|
|
(feature) => html`
|
|
<article>
|
|
<h3 style="margin-bottom: 1em" class="feature-title">
|
|
<span>${feature.icon}</span> ${feature.title}
|
|
</h3>
|
|
<p style="margin:0" class="feature-description">
|
|
${feature.description}
|
|
</p>
|
|
</article>
|
|
`,
|
|
)}
|
|
</div>
|
|
`;
|
|
}
|
|
}
|