@smitch/fluid
Version:
A Next/React ui-component libray.
16 lines (15 loc) • 915 B
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo } from 'react';
import { twMerge } from 'tailwind-merge';
var aspects = {
landscape: 'aspect-[4/3]',
portrait: 'aspect-[3/4]',
square: 'aspect-square',
video: 'aspect-video',
};
var CardImage = function (_a) {
var _b = _a.className, className = _b === void 0 ? '' : _b, title = _a.title, src = _a.src, _c = _a.aspect, aspect = _c === void 0 ? 'landscape' : _c;
var aspectClasses = useMemo(function () { return aspects[aspect]; }, [aspect]);
return (_jsx("div", { className: twMerge("card-image peer relative w-full group-[.row]:max-w-sm group-[.row]:mb-auto", className), children: _jsx("figure", { className: "card-figure relative ".concat(aspectClasses), children: _jsx("img", { src: src, className: "img object-cover absolute h-full w-full inset-0 text-transparent", alt: title }) }) }));
};
export default CardImage;