90 lines
1.9 KiB
JavaScript
90 lines
1.9 KiB
JavaScript
|
import {
|
||
|
|
DateFormat,
|
||
|
|
PageHeader,
|
||
|
|
Section,
|
||
|
|
Container,
|
||
|
|
Col12,
|
||
|
|
Row,
|
||
|
|
} from "./components/index.js";
|
||
|
|
|
||
|
|
const BlogPreview = ({ widgetFor, entry, fields, collection }) => {
|
||
|
|
const imageField = useMemo(() => {
|
||
|
|
return fields.find((field) => field.name === "image");
|
||
|
|
}, [fields]);
|
||
|
|
|
||
|
|
const imageUrl = useMediaAsset(
|
||
|
|
entry.data.image,
|
||
|
|
collection,
|
||
|
|
imageField,
|
||
|
|
entry
|
||
|
|
);
|
||
|
|
return [
|
||
|
|
PageHeader(entry),
|
||
|
|
Section(
|
||
|
|
Container(
|
||
|
|
Row([
|
||
|
|
h(
|
||
|
|
"div",
|
||
|
|
{ key: "cover-image", className: "col-12 mb-4" },
|
||
|
|
h("img", { className: "img-fluid w-100", src: imageUrl })
|
||
|
|
),
|
||
|
|
Col12(
|
||
|
|
h(
|
||
|
|
"div",
|
||
|
|
{ className: "row mb-3" },
|
||
|
|
h(
|
||
|
|
"div",
|
||
|
|
{ className: "col-6 mb-md-0 text-light" },
|
||
|
|
h("span", { className: "fw-bold me-1" }, "Geschrieben von:"),
|
||
|
|
entry.data.author
|
||
|
|
),
|
||
|
|
h(
|
||
|
|
"div",
|
||
|
|
{ className: "col-6 mb-3 mb-md-0 text-light" },
|
||
|
|
h("span", { className: "fw-bold me-1" }, "Datum:"),
|
||
|
|
entry.data.date
|
||
|
|
? DateFormat({
|
||
|
|
date: entry.data.date,
|
||
|
|
format: {
|
||
|
|
day: "numeric",
|
||
|
|
month: "short",
|
||
|
|
year: "numeric",
|
||
|
|
},
|
||
|
|
})
|
||
|
|
: ""
|
||
|
|
)
|
||
|
|
)
|
||
|
|
),
|
||
|
|
Row(
|
||
|
|
h(
|
||
|
|
"div",
|
||
|
|
{ className: "col-12 mb-md-0 text-light" },
|
||
|
|
h("span", { className: "fw-bold me-1" }, "Kategorie:"),
|
||
|
|
entry.data.categories
|
||
|
|
? entry.data.categories.map(
|
||
|
|
(category, index) => (index != 0 ? ", " : "") + category
|
||
|
|
)
|
||
|
|
: ""
|
||
|
|
)
|
||
|
|
),
|
||
|
|
h(
|
||
|
|
"div",
|
||
|
|
{ key: "border-bottom", className: "col-12 my-4" },
|
||
|
|
h("div", { className: "border-bottom" })
|
||
|
|
),
|
||
|
|
h(
|
||
|
|
"div",
|
||
|
|
{
|
||
|
|
key: "body-content",
|
||
|
|
className: "col-12 mb-5 content content-justify",
|
||
|
|
},
|
||
|
|
widgetFor("body")
|
||
|
|
),
|
||
|
|
])
|
||
|
|
)
|
||
|
|
),
|
||
|
|
];
|
||
|
|
};
|
||
|
|
|
||
|
|
export default BlogPreview;
|