@druid-sh/sdk
Version:
Druid.sh SDK for rendering blog content with SSR support
88 lines (87 loc) • 6.81 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.BlogList = BlogList;
const link_1 = __importDefault(require("next/link"));
const image_1 = __importDefault(require("next/image")); // Import the Next.js Image component
const react_1 = __importDefault(require("react"));
function BlogList({ data }) {
const { posts, allTags, basePath, currentTag } = data;
const { page, total } = data.pagination; // 'limit' is not used directly in JSX, so remove
return (react_1.default.createElement("div", { className: "grid gap-8 max-w-6xl mx-auto" },
" ",
react_1.default.createElement("div", { className: "flex flex-wrap gap-2 mb-8 p-4 bg-muted rounded-lg items-center" },
" ",
react_1.default.createElement("span", { className: "font-bold mr-4 text-foreground" }, "Tags"),
" ",
react_1.default.createElement(link_1.default, { href: `${basePath}`, className: `px-2 py-1 rounded-md text-sm transition-colors
${!currentTag
? "bg-primary text-primary-foreground font-semibold"
: "bg-muted-foreground/10 text-muted-foreground hover:bg-muted-foreground/20"}` }, "All"),
allTags.map((tag) => {
const isActive = currentTag === tag.slug;
return (react_1.default.createElement(link_1.default, { key: tag.slug, href: `${basePath}/tag/${tag.slug}`, className: `px-2 py-1 rounded-md text-sm transition-colors
${isActive
? "bg-primary text-primary-foreground font-semibold"
: "bg-muted-foreground/10 text-muted-foreground hover:bg-muted-foreground/20"}` },
"#",
tag.name));
})),
posts.length === 0 ? (react_1.default.createElement("div", { className: "text-center py-12 px-8 text-lg text-muted-foreground bg-muted rounded-lg" },
" ",
"No posts found.")) : (posts.map((post) => (react_1.default.createElement("article", { key: post.id, className: "group grid grid-cols-1 md:grid-cols-[250px_1fr] lg:grid-cols-[300px_1fr] gap-6 p-6 border border-border rounded-lg" // Converted .blog-list-item and added group for image hover
},
post.coverImage && (react_1.default.createElement("div", { className: "overflow-hidden rounded-md" },
" ",
react_1.default.createElement(link_1.default, { href: `${basePath}/${post.slug}`, className: "block" },
" ",
react_1.default.createElement(image_1.default, { src: post.coverImage, alt: post.title, width: 600, height: 300, sizes: "(max-width: 768px) 100vw, 300px", className: "w-full h-auto object-cover rounded-md transition-transform duration-300 ease-in-out" // Converted inline styles and added group-hover for scale
})))),
react_1.default.createElement("div", { className: "flex flex-col" },
" ",
react_1.default.createElement("h2", { className: "text-2xl font-bold mb-2 leading-tight" },
" ",
react_1.default.createElement(link_1.default, { href: `${basePath}/${post.slug}`, className: "text-foreground no-underline transition-colors hover:text-primary" }, post.title)),
react_1.default.createElement("p", { className: "text-muted-foreground leading-relaxed mb-4 flex-grow" },
" ",
post.excerpt),
react_1.default.createElement("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-2 mb-2 text-sm text-muted-foreground" },
" ",
react_1.default.createElement("div", { className: "flex items-center gap-2" },
" ",
post.author.avatar && (react_1.default.createElement(image_1.default, { src: post.author.avatar, alt: post.author.name, width: 24, height: 24, className: "rounded-full object-cover" // Converted inline style
})),
react_1.default.createElement("span", { className: "font-medium text-foreground" }, post.author.name),
" "),
react_1.default.createElement("span", null, "\u2022"),
react_1.default.createElement("span", { className: "text-sm text-muted-foreground" }, new Date(post.publishedAt).toLocaleDateString("en-US", {
// More explicit date formatting
year: "numeric",
month: "short",
day: "numeric",
}))),
react_1.default.createElement("div", { className: "flex flex-wrap gap-2 mt-4" },
" ",
post.tags.slice(0, 3).map((tag) => (react_1.default.createElement(link_1.default, { key: tag.slug, href: `${basePath}/tag/${tag.slug}`, className: "inline-block bg-secondary px-2 py-1 rounded-md text-xs font-semibold text-secondary-foreground no-underline transition-colors hover:bg-secondary/80" // Converted styles
},
"#",
tag.name))))))))),
total > 0 && (react_1.default.createElement("div", { className: "flex justify-center items-center gap-8 mt-8 p-4 flex-wrap sm:flex-nowrap flex-col sm:flex-row" },
" ",
page > 1 && (react_1.default.createElement(link_1.default, { href: currentTag
? `${basePath}/tag/${currentTag}?page=${page - 1}`
: `${basePath}?page=${page - 1}`, className: "px-6 py-3 bg-background border-2 border-border rounded-lg text-foreground font-medium transition-all hover:border-primary hover:bg-primary hover:text-primary-foreground no-underline text-center" // Converted .blog-pagination-link
}, "\u2190 Previous")),
react_1.default.createElement("div", { className: "px-4 py-3 bg-muted rounded-lg text-muted-foreground font-medium" },
" ",
"Page ",
page,
" of ",
total),
page < total && (react_1.default.createElement(link_1.default, { href: currentTag
? `${basePath}/tag/${currentTag}?page=${page + 1}`
: `${basePath}?page=${page + 1}`, className: "px-6 py-3 bg-background border-2 border-border rounded-lg text-foreground font-medium transition-all hover:border-primary hover:bg-primary hover:text-primary-foreground no-underline text-center" // Converted .blog-pagination-link
}, "Next \u2192"))))));
}