@smitch/fluid/lib/placeholder/PlaceHolder.js

A lightweight, Tailwind-powered React/Next.js UI component library.

import { jsx as _jsx } from "react/jsx-runtime";
import { useState, useEffect } from 'react';
import { twMerge } from 'tailwind-merge';
import { Spinner } from '..';
var baseUrl = 'https://placehold.co/';
var PlaceHolder = function (_a) {
    var _b = _a.width, width = _b === void 0 ? '288' : _b, height = _a.height, background = _a.background, color = _a.color, _c = _a.text, text = _c === void 0 ? '' : _c, _d = _a.format, format = _d === void 0 ? 'png' : _d, className = _a.className, style = _a.style;
    var _e = useState(''), src = _e[0], setSrc = _e[1];
    useEffect(function () {
        var url = "".concat(baseUrl).concat(width);
        if (height)
            url += "x".concat(height);
        if (background)
            url += "/".concat(background.replace('#', ''));
        if (color)
            url += "/".concat(color.replace('#', ''));
        url += "/".concat(format);
        if (text)
            url += "?text=".concat(encodeURIComponent(text));
        setSrc(url);
    }, [width, height, background, color, text, format]);
    return (_jsx("div", { className: 'bg-gray-200 text-gray-500', style: {
            width: "".concat(width, "px"),
            height: "".concat(height || width, "px"),
        }, children: src ? (_jsx("img", { src: src, alt: text || 'Placeholder', className: twMerge('img-placeholder', className), style: style })) : (_jsx("div", { className: 'flex items-center justify-center h-full w-full', children: _jsx(Spinner, { width: 60 }) })) }));
};
export default PlaceHolder;
//# sourceMappingURL=PlaceHolder.js.map