@ai-growth/nextjs
Version:
Seamlessly integrate Sanity CMS with Next.js applications for automated blog routing and rendering
102 lines (101 loc) • 5.16 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { AvatarImage } from './OptimizedImage';
import styles from './DefaultTemplate.module.css';
/**
* AuthorInfo component for displaying author information
*/
export const AuthorInfo = ({ author, showBio = true, showImage = true, className = '', }) => {
// Don't render if no author data
if (!author) {
return null;
}
const getAuthorName = () => {
if (typeof author === 'string') {
return author;
}
return author.name || author.title || 'Unknown Author';
};
const getAuthorBio = () => {
if (typeof author === 'string') {
return '';
}
return author.bio || author.description || '';
};
const getAuthorImage = () => {
if (typeof author === 'string') {
return null;
}
// Handle different image field structures
if (author.image) {
// Sanity image object
if (typeof author.image === 'object' && author.image.asset) {
return typeof author.image.asset === 'string'
? author.image.asset
: author.image.asset.url;
}
// Direct image URL
if (typeof author.image === 'string') {
return author.image;
}
}
// Try alternative field names
if (author.avatar) {
return typeof author.avatar === 'string' ? author.avatar : author.avatar.url;
}
if (author.photo) {
return typeof author.photo === 'string' ? author.photo : author.photo.url;
}
return null;
};
const getAuthorInitials = (name) => {
return name
.split(' ')
.map(word => word.charAt(0))
.join('')
.toUpperCase()
.slice(0, 2);
};
const getAuthorSlug = () => {
if (typeof author === 'string') {
return null;
}
if (author.slug) {
return typeof author.slug === 'string'
? author.slug
: author.slug.current || author.slug._ref;
}
return null;
};
const authorName = getAuthorName();
const authorBio = getAuthorBio();
const authorImage = getAuthorImage();
const authorSlug = getAuthorSlug();
const renderAuthorImage = () => {
if (!showImage) {
return null;
}
if (authorImage) {
return (_jsx(AvatarImage, { image: authorImage, alt: `${authorName} avatar`, className: styles.authorAvatar, size: "md", onError: () => {
// Fallback will be handled by the AvatarImage component itself
console.log(`Failed to load avatar for ${authorName}`);
} }));
}
return null;
};
const renderAuthorPlaceholder = () => {
if (!showImage || authorImage) {
return null;
}
return (_jsx("div", { className: styles.authorAvatarPlaceholder, children: getAuthorInitials(authorName) }));
};
const renderAuthorName = () => {
if (authorSlug) {
// If we have a slug, we could potentially link to author page
// For now, just render as text - linking would require router context
return (_jsx("h3", { className: styles.authorName, children: authorName }));
}
return (_jsx("h3", { className: styles.authorName, children: authorName }));
};
return (_jsxs("div", { className: `${styles.authorInfo} ${className}`, children: [showImage && (_jsxs("div", { className: styles.authorImageContainer, children: [renderAuthorImage(), renderAuthorPlaceholder(), authorImage && (_jsx("div", { className: styles.authorAvatarPlaceholder, style: { display: 'none' }, children: getAuthorInitials(authorName) }))] })), _jsxs("div", { className: styles.authorDetails, children: [renderAuthorName(), showBio && authorBio && (_jsx("p", { className: styles.authorBio, children: authorBio })), typeof author === 'object' && (_jsxs(_Fragment, { children: [author.title && author.title !== authorName && (_jsx("p", { className: styles.authorTitle, children: author.title })), author.company && (_jsx("p", { className: styles.authorCompany, children: author.company })), author.social && (_jsxs("div", { className: styles.authorSocial, children: [author.social.twitter && (_jsx("a", { href: `https://twitter.com/${author.social.twitter.replace('@', '')}`, target: "_blank", rel: "noopener noreferrer", className: styles.socialLink, "aria-label": `${authorName} on Twitter`, children: "Twitter" })), author.social.linkedin && (_jsx("a", { href: author.social.linkedin, target: "_blank", rel: "noopener noreferrer", className: styles.socialLink, "aria-label": `${authorName} on LinkedIn`, children: "LinkedIn" })), author.social.website && (_jsx("a", { href: author.social.website, target: "_blank", rel: "noopener noreferrer", className: styles.socialLink, "aria-label": `${authorName}'s website`, children: "Website" }))] }))] }))] })] }));
};
export default AuthorInfo;