@smitch/fluid
Version:
A Next/React ui-component libray.
23 lines (22 loc) • 1.63 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState, useMemo } 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;
var _f = useState(false), open = _f[0], setOpen = _f[1];
var aspectClasses = useMemo(function () { return aspects[aspect]; }, [aspect]);
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;