apphouse/dist/utils/color/getLinearGradientString.ts

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

/**
 * Creates a linear gradient CSS string based on an array of colors.
 * @param {string[]} colors - An array of colors for the gradient.
 * @param {string} direction - The direction of the gradient. (Default: "to right")
 * @returns {string} The linear gradient CSS string.
 */
export const getLinearGradientString = (
  colors: string[],
  direction = 'to right'
) => {
  // Create the color stops for the gradient
  const colorStops = colors.map((color: string, index: number) => {
    const percentage = (index / (colors.length - 1)) * 100;
    return `${color} ${percentage}%`;
  });

  // Combine the color stops into a CSS string
  const gradientString = `linear-gradient(${direction}, ${colorStops.join(
    ', '
  )})`;
  return gradientString;
};