@ai-growth/nextjs
Version:
Seamlessly integrate Sanity CMS with Next.js applications for automated blog routing and rendering
33 lines (32 loc) • 2.18 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styles from './DefaultTemplate.module.css';
/**
* ContentHeader component for displaying content title, type, and metadata
*/
export const ContentHeader = ({ title, contentType, publishedAt, metadata, showMetadata = true, className = '', }) => {
const formatDate = (dateString) => {
try {
const date = new Date(dateString);
return date.toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric',
});
}
catch {
return dateString;
}
};
const getContentTypeLabel = (type) => {
const labels = {
post: 'Blog Post',
page: 'Page',
article: 'Article',
news: 'News',
event: 'Event',
};
return labels[type] || type.charAt(0).toUpperCase() + type.slice(1);
};
return (_jsxs("header", { className: `${styles.contentHeader} ${className}`, children: [_jsx("div", { className: styles.contentTypeBadge, children: _jsx("span", { className: styles.contentTypeLabel, children: getContentTypeLabel(contentType) }) }), _jsx("h1", { className: styles.contentTitle, children: title }), showMetadata && (_jsxs("div", { className: styles.contentMetadata, children: [publishedAt && (_jsx("div", { className: styles.publishedDate, children: _jsx("time", { dateTime: publishedAt, className: styles.dateTime, children: formatDate(publishedAt) }) })), metadata?.description && (_jsx("div", { className: styles.contentDescription, children: _jsx("p", { className: styles.description, children: metadata.description }) })), metadata?.readingTime && (_jsx("div", { className: styles.readingTime, children: _jsxs("span", { className: styles.readingTimeLabel, children: [metadata.readingTime, " min read"] }) })), metadata?.tags && Array.isArray(metadata.tags) && metadata.tags.length > 0 && (_jsx("div", { className: styles.contentTags, children: metadata.tags.map((tag, index) => (_jsx("span", { className: styles.tag, children: tag }, index))) }))] }))] }));
};
export default ContentHeader;