@smitch/fluid/lib/figure/Figure.js

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

"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState, useMemo, useEffect } from "react";
import { twMerge } from "tailwind-merge";
import { Modal } from "..";
var aspects = {
    landscape: "aspect-[4/3]",
    portrait: "aspect-[3/4]",
    square: "aspect-square",
    circle: "aspect-square",
    video: "aspect-video",
    ultrawide: "aspect-[12/5]",
    phone: "aspect-[9/16]",
    auto: "aspect-auto",
};
var Figure = function (_a) {
    var _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.caption, caption = _c === void 0 ? "" : _c, _d = _a.aspect, aspect = _d === void 0 ? "landscape" : _d, src = _a.src, alt = _a.alt, _e = _a.backdrop, backdrop = _e === void 0 ? "dark" : _e, _f = _a.preload, preload = _f === void 0 ? false : _f;
    var _g = useState(false), open = _g[0], setOpen = _g[1];
    var aspectClasses = useMemo(function () { return aspects[aspect]; }, [aspect]);
    useEffect(function () {
        if (!preload || !src)
            return;
        var href = src;
        var existingLink = document.querySelector("link[rel=\"preload\"][href=\"".concat(href, "\"]"));
        if (!existingLink) {
            var link = document.createElement("link");
            link.rel = "preload";
            link.as = "image";
            link.href = href;
            document.head.appendChild(link);
        }
        return function () {
            var linkToRemove = document.querySelector("link[rel=\"preload\"][href=\"".concat(href, "\"]"));
            if (linkToRemove) {
                document.head.removeChild(linkToRemove);
            }
        };
    }, [preload, src]);
    return (_jsxs(_Fragment, { children: [_jsxs("figure", { className: twMerge("figure group relative h-auto min-w-full ".concat(aspectClasses), className), children: [_jsx("img", { src: src, className: "img object-cover absolute h-full w-full inset-0 text-transparent cursor-zoom-in ".concat(aspect === "circle" ? "rounded-full" : ""), alt: alt, onClick: function () { return setOpen(true); } }), caption && (_jsx("figcaption", { className: "figcaption line-clamp-2 py-2 text-center absolute bottom-0 w-full bg-gray-700/50 text-light", children: caption }))] }), _jsx(Modal, { src: src, caption: caption || alt, alt: alt, onClick: function () { return setOpen(false); }, open: open, theme: backdrop })] }));
};
export default Figure;
//# sourceMappingURL=Figure.js.map