gcg-website/static/admin/previews/page-previews/chronik-index-preview.js

114 lines
2.9 KiB
JavaScript
Raw Normal View History

import { PageHeader } from "./components/index.js";
const ChronikIndexPreview = ({
2023-05-29 16:22:34 +02:00
widgetFor,
widgetsFor,
entry,
fields,
collection,
}) => {
2023-05-29 16:22:34 +02:00
const imageField = useMemo(
() => fields.find((field) => field.name === "image"),
[fields]
);
2023-05-29 16:22:34 +02:00
const imageUrl = useMediaAsset(
widgetsFor("infocard").data.image,
collection,
imageField,
entry
);
return [
PageHeader(entry),
h(
"section",
2023-06-11 21:13:11 +02:00
{ className: "section" },
2023-05-29 16:22:34 +02:00
h("div", { className: "container" }, widgetFor("body")),
widgetsFor("infocard").data.enable
? h(
"div",
{ className: "container" },
h(
"div",
{ className: "card mb-3" },
h(
"div",
{ className: "row g-0" },
h(
"div",
{ className: "col-md-3" },
h("img", {
className: "img-fluid rounded w-100",
src: imageUrl,
})
),
h(
"div",
{ className: "col-md-9 d-flex align-items-center" },
h(
"div",
{ className: "card-body" },
h(
"p",
{ className: "h2 card-title" },
widgetsFor("infocard").data.quote
),
h(
"p",
{ className: "card-text" },
h(
"small",
{ className: "text-muted" },
widgetsFor("infocard").data.author
)
)
)
)
)
)
)
: null,
h(
"div",
{ className: "container" },
2023-06-11 21:13:11 +02:00
h("h2", { className: "mb-4" }, "Informationsseiten"),
2023-05-29 16:22:34 +02:00
h(
"div",
{ className: "row" },
widgetsFor("links").map((element) =>
h(
"div",
{ className: "col-lg-4 col-sm-6" },
h(
"div",
{
className: "card border-primary rounded-0 hover-shadow mb-4",
},
h(
"div",
{ className: "card-body" },
h(
"h4",
{ className: "card-title text-truncate" },
h("a", { href: element.data.link }, element.data.title)
),
h(
"a",
{
className: "btn btn-primary btn-sm",
href: element.data.link,
},
"Mehr anzeigen"
)
)
)
)
)
)
)
),
];
};
export default ChronikIndexPreview;