apphouse/dist/styles/getGradientBoxShadow.ts

Component library for React that uses observable state management and theme-able components.

const insets = [
  '-10px -10px 10px',
  '0px -10px 10px 0px',
  '10px -10px 10px',
  '10px 0 10px',
  '10px 10px 10px 0px',
  '0 10px 10px 0px',
  '-10px 10px 10px 0px'
];

/**
 * Generates a gradient box shadow based on an array of colors.
 * @param {string[]} colors - An array of colors to generate the gradient box shadow. Maximum 7 colors.
 * @returns {string} The gradient box shadow generated from the given colors.
 */
export const getGradientBoxShadow = (colors: string[]) => {
  let _colors = colors;
  if (colors.length > 7) {
    _colors = colors.slice(0, 7);
  }

  if (colors.length < 7) {
    const diff = 7 - colors.length;
    for (let i = 0; i < diff; i++) {
      _colors.push(colors[i]);
    }
  }

  const boxShadow = insets
    .map((inset, index) => `${inset} ${colors[index]}`)
    .join(', ');
  return boxShadow;
};