@ai-growth/nextjs/dist/components/OptimizedImage.d.ts

Seamlessly integrate Sanity CMS with Next.js applications for automated blog routing and rendering

/**
 * @fileoverview Optimized Image Components for Next.js
 *
 * This module provides React components that use Next.js Image optimization
 * with Sanity CMS integration, responsive sizing, and performance features.
 */
import React from 'react';
import { SanityImage } from '../types/sanity';
/**
 * Base props for optimized image components
 */
export interface OptimizedImageProps {
    /** Sanity image object or string URL */
    image: SanityImage | string | null | undefined;
    /** Image alt text (falls back to image.alt or default) */
    alt?: string;
    /** Image width */
    width: number;
    /** Image height */
    height: number;
    /** CSS class name */
    className?: string;
    /** Image priority for LCP optimization */
    priority?: boolean;
    /** Image quality (1-100) */
    quality?: number;
    /** Placeholder behavior */
    placeholder?: 'blur' | 'empty';
    /** Blur data URL for placeholder */
    blurDataURL?: string;
    /** Responsive sizes attribute */
    sizes?: string;
    /** Image loading behavior */
    loading?: 'lazy' | 'eager';
    /** Image fit within container */
    objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
    /** Image position within container */
    objectPosition?: string;
    /** Callback when image loads */
    onLoad?: () => void;
    /** Callback when image fails to load */
    onError?: () => void;
}
/**
 * Props for CMS Image component
 */
export interface CmsImageProps extends Omit<OptimizedImageProps, 'image'> {
    /** Sanity image object */
    image: SanityImage | null | undefined;
    /** Fallback image URL */
    fallbackSrc?: string;
    /** Whether to show fallback on error */
    showFallback?: boolean;
}
/**
 * Props for responsive image component
 */
export interface ResponsiveImageProps extends OptimizedImageProps {
    /** Responsive breakpoints and sizes */
    breakpoints?: {
        mobile?: number;
        tablet?: number;
        desktop?: number;
        large?: number;
    };
    /** Aspect ratio to maintain */
    aspectRatio?: number;
}
/**
 * Base optimized image component using Next.js Image
 */
export declare const OptimizedImage: React.FC<OptimizedImageProps>;
/**
 * CMS-specific image component with enhanced Sanity integration
 */
export declare const CmsImage: React.FC<CmsImageProps>;
/**
 * Responsive image component with breakpoint handling
 */
export declare const ResponsiveImage: React.FC<ResponsiveImageProps>;
/**
 * Hero image component optimized for above-the-fold content
 */
export declare const HeroImage: React.FC<Omit<OptimizedImageProps, 'priority' | 'loading'>>;
/**
 * Avatar image component for user profiles
 */
export declare const AvatarImage: React.FC<Omit<OptimizedImageProps, 'width' | 'height'> & {
    size?: 'sm' | 'md' | 'lg' | 'xl';
}>;
/**
 * Card image component for content previews
 */
export declare const CardImage: React.FC<Omit<OptimizedImageProps, 'aspectRatio'>>;
/**
 * Thumbnail image component for galleries and lists
 */
export declare const ThumbnailImage: React.FC<Omit<OptimizedImageProps, 'width' | 'height'>>;
export default OptimizedImage;
//# sourceMappingURL=OptimizedImage.d.ts.map