epic-loading-animations/src/components/horizontal-bars-page-change/utils/gradient-list.ts

Spinners and Transitions to use in React apps

interface GradientListProps {
  startColor: string;
  endColor: string;
  numBars: number;
}

const decodeColor = (color: string): number[] => {
  if (!/^#([0-9A-Fa-f]{6})$/.test(color)) {
    throw new Error("Invalid color, must be in hexadecimal format");
  }
  return [
    parseInt(color.substring(1, 3), 16),
    parseInt(color.substring(3, 5), 16),
    parseInt(color.substring(5, 7), 16),
  ];
};

const encodeColor = (rgb: number[]): string => {
  return `#${rgb.map((c) => c.toString(16).padStart(2, "0")).join("")}`;
};

const gradientList = ({
  startColor,
  endColor,
  numBars
}: GradientListProps): string[] => {
  if (numBars < 2) {
    throw new Error("numBars must be at least 2 to form a gradient.");
  }

  const startRGB = decodeColor(startColor);
  const endRGB = decodeColor(endColor);
  const gradientArray: string[] = [];

  for (let i = 0; i < numBars; i++) {
    const ratio = i / (numBars - 1);
    const interpolatedColor = startRGB.map((start, index) =>
      Math.round(start + ratio * (endRGB[index] - start))
    );
    gradientArray.push(encodeColor(interpolatedColor).toUpperCase());
  }

  return gradientArray;
};

export default gradientList;