@chayns-components/core/lib/cjs/utils/groupedImage.js

A set of beautiful React components for developing your own applications with chayns.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.createSecondImageClipPath = exports.createCareOfClipPath = void 0;
const GAP = 3;
const createCareOfClipPath = ({
  imageFactors,
  height
}) => {
  const hasMultipleImages = imageFactors.length > 1;
  const radius = 3;
  const careOfSize = height * (hasMultipleImages ? 0.28 : 0.38);
  const imageHeight = height * (hasMultipleImages && imageFactors[1] ? imageFactors[1] : 1);
  const cutStart = height - (hasMultipleImages ? height - imageHeight : 0) - careOfSize - GAP;
  const normalizedCut = cutStart / imageHeight;
  const normalizedRadius = radius / height;
  const endY = 0.63;
  return `
        M0,0
        H1
        V${normalizedCut}
        H${endY}
        A${normalizedRadius} ${normalizedRadius} 0 0 0 ${normalizedCut} ${endY}
        V1
        H0
        Z
    `;
};
exports.createCareOfClipPath = createCareOfClipPath;
const createSecondImageClipPath = ({
  height,
  shouldShowRoundImage
}) => {
  const imageHeight = height * 0.8;
  const imageScale = imageHeight / height;
  const startContainer = 0.2;
  const gapNormContainer = GAP / height;
  const totalStartContainer = startContainer - (shouldShowRoundImage ? 0 : gapNormContainer);
  const startImage = shouldShowRoundImage ? totalStartContainer : totalStartContainer / imageScale;
  const radius = 0.6;
  if (shouldShowRoundImage) {
    return `
        
        M0,0
        H1
        V${startImage}
        H1
        A${radius} ${radius} 0 0 0 ${startImage} 1
        V1
        H0
        Z
        
        `;
  }
  return `
        M0,0
        H1
        V${startImage}
        H${startImage}
        V1
        H0
        Z
    `;
};
exports.createSecondImageClipPath = createSecondImageClipPath;
//# sourceMappingURL=groupedImage.js.map