bilibili-bangumi-component
Version:
展示 bilibili 与 Bangumi 追番列表的 WebComponent 组件
19 lines (18 loc) • 1.43 kB
JavaScript
import { h } from "@stencil/core";
import { Skeleton } from "./Skeleton";
const Label = ({ containerState, labels }) => {
let renderLabels = [...labels];
if (containerState === 'middle')
renderLabels = renderLabels.slice(0, 4);
if (containerState === 'small')
renderLabels = renderLabels.slice(0, 3);
return (h("div", { class: "bbc-bangumi-labels" }, renderLabels.map(label => (h("div", { class: {
'bbc-bangumi-label': true,
'bbc-md-label-text': containerState !== 'large',
} }, h("p", { class: "bbc-bangumi-label-title" }, label.label), label.value && h("p", null, label.value))))));
};
export const List = ({ list, loading, containerState }) => {
return (h("div", { class: "bbc-bangumi" }, list.map(item => (h("div", null, loading
? h(Skeleton, null)
: (h("div", { class: "bbc-bangumi-item" }, h("a", { href: item.url, target: "_blank", rel: "noreferrer" }, h("img", { src: item.cover, alt: "cover", loading: "lazy", referrerpolicy: "no-referrer" })), h("div", { class: "bbc-bangumi-content" }, h("h3", { class: "bbc-bangumi-title" }, h("a", { href: item.url, target: "_blank", rel: "noreferrer", innerHTML: item.name ? item.name : item.nameCN }), item.name && h("small", { innerHTML: item.nameCN })), h(Label, { containerState: containerState, labels: item.labels }), h("p", { class: "bbc-bangumi-summary", innerHTML: item.summary })))))))));
};