react-vite-themes/dist/components/atoms/Image/Image.js

A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState } from 'react';
import { cn } from '../../../utils';
export const Image = ({ src, alt = '', variant = 'default', size = 'md', style = 'natural', isRounded = false, isResponsive = false, isLoading = false, isError = false, fallback, className, ...props }) => {
    const [imageState, setImageState] = useState(isLoading ? 'loading' : 'loaded');
    const handleLoad = () => {
        setImageState('loaded');
    };
    const handleError = () => {
        setImageState('error');
    };
    const imageClasses = cn('image', `image--${variant}`, `image--${size}`, `image--${style}`, isRounded && 'image--rounded', isResponsive && 'image--responsive', imageState === 'loading' && 'image--loading', imageState === 'error' && 'image--error', className);
    if (imageState === 'error' && fallback) {
        return (_jsx("div", { className: imageClasses, ...props, children: _jsx("div", { className: "image__fallback", children: typeof fallback === 'string' ? (_jsx("img", { src: fallback, alt: alt })) : (fallback) }) }));
    }
    return (_jsxs("div", { className: imageClasses, ...props, children: [imageState === 'loading' && (_jsx("div", { className: "image__loading", children: _jsx("div", { className: "image__spinner" }) })), _jsx("img", { src: src, alt: alt, onLoad: handleLoad, onError: handleError, className: "image__element" })] }));
};