@ai-growth/nextjs
Version:
Seamlessly integrate Sanity CMS with Next.js applications for automated blog routing and rendering
156 lines (155 loc) • 12.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SimpleDefaultTemplate = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const CmsProvider_1 = require("../components/CmsProvider");
const OptimizedImage_1 = require("../components/OptimizedImage");
/**
* Simple Default Template that integrates with CmsProvider theme system
*/
const SimpleDefaultTemplate = ({ content, className = '', showMetadata = true, showAuthor = true, customRenderers, isLoading = false, error, onRetry, }) => {
const theme = (0, CmsProvider_1.useCmsTheme)();
// Helper function for date formatting
const formatDate = (dateString) => {
try {
const date = new Date(dateString);
return date.toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
}
catch {
return dateString;
}
};
// Se não houver conteúdo, exiba mensagem amigável
if (!content) {
return ((0, jsx_runtime_1.jsx)("article", { className: `cms-template cms-template--empty ${className}`.trim(), children: (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: '800px', margin: '0 auto', padding: theme.spacing?.lg }, children: (0, jsx_runtime_1.jsx)("h2", { style: { color: theme.colors?.text }, children: "Conte\u00FAdo n\u00E3o encontrado" }) }) }));
}
// Loading state
if (isLoading) {
return ((0, jsx_runtime_1.jsx)("article", { className: `cms-template cms-template--loading ${className}`.trim(), style: {
'--cms-primary': theme.colors?.primary,
'--cms-text': theme.colors?.text,
'--cms-background': theme.colors?.background,
fontFamily: theme.typography?.fontFamily,
color: theme.colors?.text,
}, children: (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: '800px', margin: '0 auto', padding: theme.spacing?.lg }, children: (0, jsx_runtime_1.jsxs)("div", { style: { animation: 'pulse 2s infinite' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
height: '2.5rem',
backgroundColor: theme.colors?.surface,
borderRadius: theme.borderRadius?.md,
marginBottom: theme.spacing?.md
} }), (0, jsx_runtime_1.jsx)("div", { style: {
height: '1rem',
backgroundColor: theme.colors?.surface,
borderRadius: theme.borderRadius?.md,
width: '60%',
margin: '0 auto'
} })] }) }) }));
}
// Error state
if (error) {
return ((0, jsx_runtime_1.jsx)("article", { className: `cms-template cms-template--error ${className}`.trim(), style: {
'--cms-primary': theme.colors?.primary,
'--cms-text': theme.colors?.text,
'--cms-background': theme.colors?.background,
fontFamily: theme.typography?.fontFamily,
color: theme.colors?.text,
}, children: (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: '800px', margin: '0 auto', padding: theme.spacing?.lg }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
textAlign: 'center',
padding: theme.spacing?.xl,
backgroundColor: '#fef2f2',
border: '1px solid #fecaca',
borderRadius: theme.borderRadius?.lg,
color: '#991b1b'
}, children: [(0, jsx_runtime_1.jsx)("h2", { style: { fontSize: theme.typography?.fontSize?.xl, marginBottom: theme.spacing?.md }, children: "Unable to load content" }), (0, jsx_runtime_1.jsx)("p", { style: { marginBottom: theme.spacing?.lg }, children: error }), onRetry && ((0, jsx_runtime_1.jsx)("button", { onClick: onRetry, style: {
backgroundColor: '#dc2626',
color: 'white',
border: 'none',
padding: `${theme.spacing?.sm} ${theme.spacing?.lg}`,
borderRadius: theme.borderRadius?.md,
cursor: 'pointer'
}, children: "Try again" }))] }) }) }));
}
// Main content rendering
return ((0, jsx_runtime_1.jsx)("article", { className: `cms-template cms-template--${content._type || 'default'} ${className}`.trim(), style: {
'--cms-primary': theme.colors?.primary,
'--cms-text': theme.colors?.text,
'--cms-text-secondary': theme.colors?.textSecondary,
'--cms-background': theme.colors?.background,
'--cms-surface': theme.colors?.surface,
'--cms-border': theme.colors?.border,
fontFamily: theme.typography?.fontFamily,
color: theme.colors?.text,
backgroundColor: theme.colors?.background,
lineHeight: theme.typography?.lineHeight?.normal,
}, children: (0, jsx_runtime_1.jsxs)("div", { style: { maxWidth: '800px', margin: '0 auto', padding: theme.spacing?.lg }, children: [customRenderers?.header && content ?
customRenderers.header(content) :
(0, jsx_runtime_1.jsxs)("header", { style: { marginBottom: theme.spacing?.xl, textAlign: 'center' }, children: [(0, jsx_runtime_1.jsx)("h1", { style: {
fontSize: theme.typography?.fontSize?.['4xl'],
fontWeight: theme.typography?.fontWeight?.bold,
margin: `0 0 ${theme.spacing?.md} 0`,
color: theme.colors?.text
}, children: content.title }), content.subtitle && ((0, jsx_runtime_1.jsx)("h2", { style: {
fontSize: theme.typography?.fontSize?.xl,
fontWeight: theme.typography?.fontWeight?.medium,
color: theme.colors?.textSecondary,
margin: `0 0 ${theme.spacing?.lg} 0`
}, children: content.subtitle })), showMetadata && ((0, jsx_runtime_1.jsxs)("div", { style: {
display: 'flex',
flexWrap: 'wrap',
alignItems: 'center',
justifyContent: 'center',
gap: theme.spacing?.md,
marginBottom: theme.spacing?.xl,
fontSize: theme.typography?.fontSize?.sm,
color: theme.colors?.textSecondary
}, children: [content.publishedAt && ((0, jsx_runtime_1.jsx)("time", { dateTime: content.publishedAt, children: formatDate(content.publishedAt) })), content.category && ((0, jsx_runtime_1.jsx)("span", { style: {
backgroundColor: theme.colors?.primary,
color: 'white',
padding: `${theme.spacing?.xs} ${theme.spacing?.sm}`,
borderRadius: theme.borderRadius?.md,
fontSize: theme.typography?.fontSize?.xs,
fontWeight: theme.typography?.fontWeight?.medium,
textTransform: 'uppercase'
}, children: content.category })), content.readingTime && ((0, jsx_runtime_1.jsxs)("span", { style: { fontStyle: 'italic' }, children: [content.readingTime, " min read"] }))] })), content.featuredImage && ((0, jsx_runtime_1.jsx)("div", { style: {
marginBottom: theme.spacing?.xl,
borderRadius: theme.borderRadius?.lg,
overflow: 'hidden',
boxShadow: theme.shadows?.md
}, children: (0, jsx_runtime_1.jsx)(OptimizedImage_1.CmsImage, { image: content.featuredImage, alt: typeof content.featuredImage === 'string' ? content.title : content.featuredImage.alt || content.title, width: 800, height: 450, priority: true, quality: 90, sizes: "(max-width: 768px) 100vw, 800px" }) }))] }), customRenderers?.body ?
customRenderers.body(content.content) :
(0, jsx_runtime_1.jsxs)("main", { style: { marginBottom: theme.spacing?.xl }, children: [content.excerpt && ((0, jsx_runtime_1.jsx)("div", { style: {
fontSize: theme.typography?.fontSize?.lg,
color: theme.colors?.textSecondary,
fontStyle: 'italic',
padding: theme.spacing?.lg,
backgroundColor: theme.colors?.surface,
borderLeft: `4px solid ${theme.colors?.primary}`,
borderRadius: `0 ${theme.borderRadius?.md} ${theme.borderRadius?.md} 0`,
marginBottom: theme.spacing?.xl
}, children: (0, jsx_runtime_1.jsx)("p", { children: content.excerpt }) })), (0, jsx_runtime_1.jsx)("div", { style: {
fontSize: theme.typography?.fontSize?.base,
lineHeight: theme.typography?.lineHeight?.relaxed
}, children: typeof content.content === 'string' ? ((0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: content.content } })) : ((0, jsx_runtime_1.jsx)("p", { children: content.content || 'No content available' })) })] }), showAuthor && content.author && (customRenderers?.author ?
customRenderers.author(content.author) :
(0, jsx_runtime_1.jsx)("section", { style: {
backgroundColor: theme.colors?.surface,
border: `1px solid ${theme.colors?.border}`,
borderRadius: theme.borderRadius?.lg,
padding: theme.spacing?.xl,
marginBottom: theme.spacing?.xl
}, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'flex-start', gap: theme.spacing?.lg }, children: [content.author.image && ((0, jsx_runtime_1.jsx)("div", { style: { flexShrink: 0 }, children: (0, jsx_runtime_1.jsx)(OptimizedImage_1.AvatarImage, { image: content.author.image, alt: `${content.author.name} avatar`, size: "lg", quality: 85 }) })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { style: {
fontSize: theme.typography?.fontSize?.lg,
fontWeight: theme.typography?.fontWeight?.semibold,
color: theme.colors?.text,
margin: `0 0 ${theme.spacing?.sm} 0`
}, children: content.author.name }), content.author.bio && ((0, jsx_runtime_1.jsx)("p", { style: {
color: theme.colors?.textSecondary,
marginBottom: theme.spacing?.md,
lineHeight: theme.typography?.lineHeight?.relaxed
}, children: content.author.bio }))] })] }) })), showMetadata && customRenderers?.metadata && customRenderers.metadata(content)] }) }));
};
exports.SimpleDefaultTemplate = SimpleDefaultTemplate;
exports.default = exports.SimpleDefaultTemplate;