@ai-growth/nextjs
Version:
Seamlessly integrate Sanity CMS with Next.js applications for automated blog routing and rendering
148 lines (147 loc) • 11 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCmsTheme } from '../components/CmsProvider';
import { CmsImage, AvatarImage } from '../components/OptimizedImage';
/**
* Simple Default Template that integrates with CmsProvider theme system
*/
export const SimpleDefaultTemplate = ({ content, className = '', showMetadata = true, showAuthor = true, customRenderers, isLoading = false, error, onRetry, }) => {
const theme = 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;
}
};
// Loading state
if (isLoading) {
return (_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: _jsx("div", { style: { maxWidth: '800px', margin: '0 auto', padding: theme.spacing?.lg }, children: _jsxs("div", { style: { animation: 'pulse 2s infinite' }, children: [_jsx("div", { style: {
height: '2.5rem',
backgroundColor: theme.colors?.surface,
borderRadius: theme.borderRadius?.md,
marginBottom: theme.spacing?.md
} }), _jsx("div", { style: {
height: '1rem',
backgroundColor: theme.colors?.surface,
borderRadius: theme.borderRadius?.md,
width: '60%',
margin: '0 auto'
} })] }) }) }));
}
// Error state
if (error) {
return (_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: _jsx("div", { style: { maxWidth: '800px', margin: '0 auto', padding: theme.spacing?.lg }, children: _jsxs("div", { style: {
textAlign: 'center',
padding: theme.spacing?.xl,
backgroundColor: '#fef2f2',
border: '1px solid #fecaca',
borderRadius: theme.borderRadius?.lg,
color: '#991b1b'
}, children: [_jsx("h2", { style: { fontSize: theme.typography?.fontSize?.xl, marginBottom: theme.spacing?.md }, children: "Unable to load content" }), _jsx("p", { style: { marginBottom: theme.spacing?.lg }, children: error }), onRetry && (_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 (_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: _jsxs("div", { style: { maxWidth: '800px', margin: '0 auto', padding: theme.spacing?.lg }, children: [customRenderers?.header ?
customRenderers.header(content) :
_jsxs("header", { style: { marginBottom: theme.spacing?.xl, textAlign: 'center' }, children: [_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 && (_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 && (_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 && (_jsx("time", { dateTime: content.publishedAt, children: formatDate(content.publishedAt) })), content.category && (_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 && (_jsxs("span", { style: { fontStyle: 'italic' }, children: [content.readingTime, " min read"] }))] })), content.featuredImage && (_jsx("div", { style: {
marginBottom: theme.spacing?.xl,
borderRadius: theme.borderRadius?.lg,
overflow: 'hidden',
boxShadow: theme.shadows?.md
}, children: _jsx(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) :
_jsxs("main", { style: { marginBottom: theme.spacing?.xl }, children: [content.excerpt && (_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: _jsx("p", { children: content.excerpt }) })), _jsx("div", { style: {
fontSize: theme.typography?.fontSize?.base,
lineHeight: theme.typography?.lineHeight?.relaxed
}, children: typeof content.content === 'string' ? (_jsx("div", { dangerouslySetInnerHTML: { __html: content.content } })) : (_jsx("p", { children: content.content || 'No content available' })) })] }), showAuthor && content.author && (customRenderers?.author ?
customRenderers.author(content.author) :
_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: _jsxs("div", { style: { display: 'flex', alignItems: 'flex-start', gap: theme.spacing?.lg }, children: [content.author.image && (_jsx("div", { style: { flexShrink: 0 }, children: _jsx(AvatarImage, { image: content.author.image, alt: `${content.author.name} avatar`, size: "lg", quality: 85 }) })), _jsxs("div", { children: [_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 && (_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), customRenderers?.footer && customRenderers.footer(content)] }) }));
};
export default SimpleDefaultTemplate;