65 lines
3.5 KiB
JavaScript
65 lines
3.5 KiB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
|
|
import { A as Avatar, a as AvatarImage, b as AvatarFallback } from "./avatar-C8iCpF5R.js";
|
|
import { B as Badge } from "./badge-J-zeQvMg.js";
|
|
import { S as Separator } from "./separator-CSqU-rrB.js";
|
|
import { Renderer } from "richtor";
|
|
/* empty css */
|
|
import "react";
|
|
import "@radix-ui/react-avatar";
|
|
import "./utils-DLCPGU0v.js";
|
|
import "clsx";
|
|
import "tailwind-merge";
|
|
import "@radix-ui/react-slot";
|
|
import "class-variance-authority";
|
|
import "@radix-ui/react-separator";
|
|
const Preview = ({ blog }) => {
|
|
var _a, _b, _c, _d, _e;
|
|
const createdAt = new Date(blog.created_at).toLocaleDateString();
|
|
const authorInitials = ((_a = blog.user) == null ? void 0 : _a.name) ? blog.user.name.split(" ").map((n) => n.charAt(0)).join("").toUpperCase() : "AU";
|
|
const bannerSrc = blog.banner || "/assets/images/blank-image.jpg";
|
|
const thumbnailSrc = blog.thumbnail || "/assets/images/blank-image.jpg";
|
|
const keywords = (blog.keywords || "").split(",").map((k) => k.trim()).filter(Boolean);
|
|
return /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-4xl space-y-6", children: [
|
|
/* @__PURE__ */ jsx("div", { className: "overflow-hidden border", children: /* @__PURE__ */ jsx("img", { src: bannerSrc, alt: "Blog banner", className: "max-h-64 w-full object-cover sm:max-h-80 md:max-h-[420px]" }) }),
|
|
/* @__PURE__ */ jsxs("div", { className: "space-y-3 px-4", children: [
|
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
|
|
((_b = blog.category) == null ? void 0 : _b.name) && /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: blog.category.name }),
|
|
keywords.slice(0, 3).map((k) => /* @__PURE__ */ jsx(Badge, { variant: "outline", children: k }, k))
|
|
] }),
|
|
/* @__PURE__ */ jsx("h1", { className: "text-2xl leading-tight font-semibold md:text-3xl", children: blog.title }),
|
|
/* @__PURE__ */ jsxs("div", { className: "text-muted-foreground flex flex-wrap items-center gap-3 text-sm", children: [
|
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
/* @__PURE__ */ jsxs(Avatar, { className: "h-8 w-8", children: [
|
|
/* @__PURE__ */ jsx(AvatarImage, { src: ((_c = blog.user) == null ? void 0 : _c.photo) || void 0, alt: ((_d = blog.user) == null ? void 0 : _d.name) || "Author" }),
|
|
/* @__PURE__ */ jsx(AvatarFallback, { children: authorInitials })
|
|
] }),
|
|
/* @__PURE__ */ jsx("span", { children: (_e = blog.user) == null ? void 0 : _e.name })
|
|
] }),
|
|
/* @__PURE__ */ jsx("span", { children: "•" }),
|
|
/* @__PURE__ */ jsx("span", { children: createdAt })
|
|
] })
|
|
] }),
|
|
/* @__PURE__ */ jsx(Separator, {}),
|
|
/* @__PURE__ */ jsxs("div", { className: "space-y-6 px-6 pb-10", children: [
|
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
/* @__PURE__ */ jsx(
|
|
"img",
|
|
{
|
|
src: thumbnailSrc,
|
|
alt: "Blog thumbnail",
|
|
className: "max-h-60 w-full overflow-hidden rounded-lg border object-cover sm:max-h-72 md:max-h-96"
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsx("div", { className: "prose dark:prose-invert max-w-none py-6", children: /* @__PURE__ */ jsx(Renderer, { value: blog.description }) })
|
|
] }),
|
|
keywords.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: keywords.map((k) => /* @__PURE__ */ jsxs(Badge, { variant: "secondary", children: [
|
|
"#",
|
|
k
|
|
] }, k)) })
|
|
] })
|
|
] });
|
|
};
|
|
export {
|
|
Preview as default
|
|
};
|